/* =====================================================================
   IRONWORKS SMM theme — riveted steel, rust, forged copper, forge ember.
   Loaded after app.css. Colours come from the Ironworks SMM logo.
   Headings: Oswald (condensed, industrial) · Brand: Alfa Slab One
   Body text stays the plain system font so it is easy to read.
   ===================================================================== */
@font-face { font-family: "Alfa Slab One"; src: url("fonts/alfa-slab-one.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Oswald"; src: url("fonts/oswald-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --bg:        #111214;   /* gunmetal */
  --surface:   #1b1c1f;
  --surface-2: #26282c;
  --border:    #3b3d42;
  --text:      #ede8de;   /* warm off-white, like worn paint */
  --muted:     #aaa398;
  --primary:   #d2722c;   /* forged copper / ember */
  --primary-h: #e8873d;
  --primary-d: #8f4718;
  --primary-rgb: 210, 114, 44;
  --navy:      #18191c;
  --rust:      #7b3b1d;
  --rust-rgb:  123, 59, 29;
  --steel:     #8e9298;
  --cream:     #d8d2c6;
  --gear:      #4a4c51;
  --chrome-1:  #f4efe4;
  --chrome-2:  #cfc8bb;
  --chrome-3:  #8b847a;
  --display: "Oswald", "Arial Narrow", Arial, sans-serif;
  --slab: "Alfa Slab One", Rockwell, "Courier New", serif;
  /* fine grain for steel plates */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  /* four corner rivets */
  --rivet: #9a9ea5;
  --rivet-ring: #2b2d31;
}
/* rivet helper: radial gradients at each corner */
.card, .lock-card, .dialog, .building-banner {
  --r: radial-gradient(circle, var(--rivet) 0 2.2px, #5d6168 2.6px 3.1px, var(--rivet-ring) 3.4px 4.2px, transparent 4.6px);
}

html { background: var(--bg); }
body {
  background:
    var(--grain),
    radial-gradient(1100px 520px at 88% -8%, rgba(var(--rust-rgb), .20), transparent 60%),
    radial-gradient(900px 520px at -8% 112%, rgba(var(--primary-rgb), .10), transparent 60%),
    linear-gradient(165deg, #141518 0%, #0f1012 100%) fixed;
}
h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: .03em; }

/* ---------- Header: dark riveted steel plate ---------- */
.topbar {
  position: relative;
  background:
    var(--grain),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .022) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, #2b2d31 0%, #1d1e21 55%, #17181a 100%);
  border-bottom: 0;
  box-shadow: 0 3px 0 0 var(--primary-d), 0 4px 0 0 #000, 0 8px 18px rgba(0, 0, 0, .5);
}
.topbar::after {   /* rivet strip along the bottom edge */
  content: ""; position: absolute; left: 0; right: 0; bottom: 3px; height: 8px; pointer-events: none;
  background: radial-gradient(circle at 4px 4px, #8a8e94 0 1.6px, #303236 2.2px 3px, transparent 3.4px) 10px 0 / 46px 8px repeat-x;
  opacity: .8;
}
.topbar .badge-img {
  width: 48px; border-radius: 6px; border: 2px solid #4b4d52;
  box-shadow: 0 0 0 1px #000, 0 2px 8px rgba(0, 0, 0, .7), 0 0 14px rgba(var(--primary-rgb), .25);
  filter: none;
}
.chrome {
  font-family: var(--slab); letter-spacing: .05em;
  background: linear-gradient(180deg, #f6f1e7 0%, #d9d2c4 46%, #9b9387 54%, #e2dbcd 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: .6px rgba(0, 0, 0, .55);
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .8));
}
.brand-name { font-size: 22px; }
.brand-tag { font: 600 11px/1.2 var(--display); letter-spacing: .26em; color: var(--primary); }
.env-badge {
  font-family: var(--display); font-weight: 600; letter-spacing: .12em;
  border: 2px solid var(--primary); color: var(--primary-h);
  background: repeating-linear-gradient(135deg, rgba(var(--primary-rgb), .14) 0 8px, rgba(var(--primary-rgb), .06) 8px 16px);
}
.who { font-family: var(--display); font-weight: 600; letter-spacing: .04em; font-size: 17px; }

/* ---------- Tabs ---------- */
.tabs {
  background: linear-gradient(180deg, #121315 0%, #17181b 100%);
  border-bottom: 1px solid #000; box-shadow: inset 0 -1px 0 #2c2e32;
}
.tab-group-name { font-family: var(--display); letter-spacing: .2em; }
.tabs button { font-weight: 700; color: #b9b2a6; }
.tabs button:hover { color: var(--text); }
.tabs button[aria-selected="true"] {
  color: #fff; border-bottom-color: var(--primary);
  background: linear-gradient(180deg, transparent 0%, rgba(var(--primary-rgb), .16) 100%);
  text-shadow: 0 0 12px rgba(var(--primary-rgb), .45);
}

/* ---------- Cards: steel plates with corner rivets ---------- */
.card {
  background:
    var(--r) 6px 6px / 12px 12px no-repeat,
    var(--r) right 6px top 6px / 12px 12px no-repeat,
    var(--r) left 6px bottom 6px / 12px 12px no-repeat,
    var(--r) right 6px bottom 6px / 12px 12px no-repeat,
    var(--grain),
    linear-gradient(180deg, #24262a 0%, #1b1c1f 110px);
  border: 1px solid #36383d; border-top-color: #4a4c52; border-bottom-color: #0c0c0d;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 8px 22px rgba(0, 0, 0, .45);
  padding: 1.35rem 1.5rem;
}
.card-head h2 { font-size: 1.45rem; color: #f2ede3; }
.card-head h2::before {
  content: ""; display: inline-block; width: 6px; height: .9em; margin-right: .55rem; vertical-align: -.06em;
  background: linear-gradient(180deg, var(--primary-h), var(--primary-d));
  box-shadow: 0 0 8px rgba(var(--primary-rgb), .4);
}
.tile { background: #141517; border-color: #34363b; }

/* ---------- Tables ---------- */
th { font-family: var(--display); font-weight: 600; font-size: 13px; letter-spacing: .1em; color: #b0a99d; border-bottom: 2px solid #34363b; }
td { border-bottom-color: #2a2c30; }
table.clickable tbody tr:hover td, tbody tr:hover td { background: rgba(var(--primary-rgb), .05); }

/* ---------- Buttons ---------- */
.btn {
  background: linear-gradient(180deg, #303237 0%, #25272b 100%);
  border: 1px solid #46484e; border-bottom-color: #18191b;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 1px 2px rgba(0, 0, 0, .5);
}
.btn:hover { border-color: var(--primary); }
.btn-primary, .keypad .key-go {
  background: linear-gradient(180deg, #ea8a43 0%, #cf6a24 52%, #a9521a 100%);
  border: 1px solid #6e3410; color: #160c05;
  text-shadow: 0 1px 0 rgba(255, 214, 170, .35);
  box-shadow: inset 0 1px 0 rgba(255, 220, 185, .45), 0 2px 4px rgba(0, 0, 0, .5);
}
.btn-primary:hover, .keypad .key-go:hover {
  background: linear-gradient(180deg, #f39a55 0%, #dc7630 52%, #b45a1d 100%); border-color: #6e3410;
  box-shadow: inset 0 1px 0 rgba(255, 220, 185, .5), 0 0 14px rgba(var(--primary-rgb), .45);
}
.btn-ghost { background: transparent; box-shadow: none; }
.btn-danger { background: linear-gradient(180deg, #d9534a, #b3352d); border-color: #6b1a15; }
input, select, textarea { background: #0d0e10; border-color: #3a3c41; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .6); }
input:focus, select:focus, textarea:focus { border-color: var(--primary); }

/* ---------- Ferrous / nonferrous banner: rust-stained plate ---------- */
.building-banner {
  border: 1px solid #5a2f19; border-left: 6px solid var(--primary);
  background:
    var(--r) right 6px top 6px / 12px 12px no-repeat,
    var(--r) right 6px bottom 6px / 12px 12px no-repeat,
    var(--grain),
    linear-gradient(90deg, rgba(var(--rust-rgb), .45) 0%, rgba(var(--rust-rgb), .14) 55%, rgba(30, 31, 34, .9) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 6px 18px rgba(0, 0, 0, .4);
}
.bb-title { font: 600 1.6rem var(--display); letter-spacing: .14em; }
.bb-step { background: #17181b; border-color: #3a3c41; }
.bb-step.on { border-color: var(--primary); background: rgba(var(--primary-rgb), .16); box-shadow: 0 0 12px rgba(var(--primary-rgb), .2); }

/* ---------- Dialogs & toasts ---------- */
.dialog {
  background:
    var(--r) 6px 6px / 12px 12px no-repeat,
    var(--r) right 6px top 6px / 12px 12px no-repeat,
    var(--grain),
    linear-gradient(180deg, #26282c 0%, #1b1c1f 140px);
  border: 1px solid #45474d; border-top: 3px solid var(--primary);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .7);
}
.dialog h2 { font-family: var(--display); }
.toast { background: linear-gradient(180deg, #2a2c30, #212226); box-shadow: 0 12px 30px rgba(0, 0, 0, .55); }

/* ---------- Lock screen: the Ironworks plate on forge-lit steel ---------- */
.lock-screen {
  background:
    url("brand/badge.webp") center / min(78vh, 90vw) auto no-repeat,
    radial-gradient(ellipse at 50% 55%, rgba(var(--primary-rgb), .16) 0%, transparent 60%),
    url("brand/gears.svg") right -120px bottom -120px / 520px no-repeat,
    url("brand/gears.svg") left -160px top -160px / 440px no-repeat,
    var(--grain),
    linear-gradient(165deg, #17181b 0%, #0d0e10 100%);
}
@media (min-width: 1100px) {
  .lock-screen {
    background-position: left max(4vw, calc(50vw - 640px)) center, 28% 55%, right -120px bottom -120px, left -160px top -160px, 0 0, 0 0;
    background-size: min(80vh, 44vw) auto, auto, 520px, 440px, auto, auto;
  }
}
@media (max-width: 1099px) {
  .lock-screen {
    background-position: center 1rem, 50% 30%, right -120px bottom -120px, left -160px top -160px, 0 0, 0 0;
    background-size: auto min(40vh, 78vw), auto, 520px, 440px, auto, auto;
  }
}
.lock-card {
  background:
    var(--r) 8px 8px / 12px 12px no-repeat,
    var(--r) right 8px top 8px / 12px 12px no-repeat,
    var(--r) left 8px bottom 8px / 12px 12px no-repeat,
    var(--r) right 8px bottom 8px / 12px 12px no-repeat,
    var(--grain),
    linear-gradient(180deg, rgba(42, 44, 49, .97) 0%, rgba(26, 27, 30, .97) 100%);
  border: 1px solid #4a4c52; border-top: 4px solid var(--primary);
  box-shadow: 0 28px 70px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.lock-card .brand-tag { font-size: 13px; letter-spacing: .3em; }
.pin-label { font-family: var(--display); font-size: 20px; letter-spacing: .06em; }
.pin-dots span { border-color: var(--primary); background: #0d0e10; box-shadow: inset 0 1px 3px #000; }
.pin-dots span.on { background: radial-gradient(circle at 40% 35%, #ffb070, var(--primary) 55%, var(--primary-d)); box-shadow: 0 0 10px rgba(var(--primary-rgb), .6); }
.keypad button:not(.key-go) {
  background: linear-gradient(180deg, #34363b 0%, #26282c 100%);
  border: 1px solid #4a4c52; border-bottom-color: #121314;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 2px 3px rgba(0, 0, 0, .55);
}
.keypad button:not(.key-go):hover { border-color: var(--primary); }
.lock-foot { font-family: var(--display); letter-spacing: .18em; }
.lock-foot { color: #b4ada1; }

/* ---------- Truck-flow turn cards keep their colours, on steel ---------- */
.turn-head h2 { font-family: var(--display); }

/* ---------- Ticket numbers stamped like the logo ---------- */
.tran-big, .ticket-no, .t-num { font-family: var(--slab); letter-spacing: .06em; }

/* ---------- Links: copper, not browser purple ---------- */
a, a:visited, .linklike { color: var(--primary-h); text-decoration-color: rgba(var(--primary-rgb), .55); }
a:hover { color: #ffb37a; }

/* ---------- Parking Lot: materials on the ticket ---------- */
.lot-mats { line-height: 1.3; }
.lot-mat { white-space: nowrap; }
.lot-mat + .lot-mat { margin-top: 2px; }
.lot-mat-now { color: var(--primary-h); font-weight: 700; }
.yard-done { margin: -.3rem 0 .9rem; padding: .55rem .8rem; border-left: 4px solid var(--primary); background: rgba(var(--primary-rgb), .08); }
.yard-done strong { font-family: var(--display); letter-spacing: .05em; }
.lot-seller { white-space: nowrap; }