/* tickit.dev "Machined" theme — brushed aluminum, ITTH CI.
   Copyright 2026 ITTH GmbH & Co. KG. SPDX-License-Identifier: Apache-2.0 */
:root{
  --metal-hi:#f6f8f9; --metal:#d3d8dd; --metal-lo:#a9b0b7; --metal-deep:#8c949c;
  --edge-hi:#ffffff; --edge-lo:#7e858d;
  --ink:#1c1f22; --ink-soft:#3a3d42; --muted:#6b7076;
  --accent:#1c4ea3; --accent-hi:#3a78d8; --accent-lo:#143b80;
  --danger:#a8322d; --danger-hi:#c8514b;
  --led-steel:#8a9099; --led-amber:#e08a14; --led-blue:#2f6fd0; --led-green:#2f9a52;
  /* subtle brushed grain — only on metal panels/chrome, never the page background */
  --brush: repeating-linear-gradient(90deg, rgba(255,255,255,0) 0, rgba(255,255,255,.16) .5px, rgba(0,0,0,.02) 1.5px, rgba(255,255,255,0) 2.5px);
  --sheen: linear-gradient(177deg, var(--metal-hi) 0%, var(--metal) 42%, var(--metal-lo) 78%, var(--metal-deep) 100%);
  --radius:5px;
}
body{
  /* System Helvetica stack (matches ITTH CI) — no web-font download, no FOUC. */
  font-family:"Helvetica Neue",Helvetica,Arial,"Segoe UI",Roboto,system-ui,sans-serif;
  color:var(--ink);
  /* flat smooth brushed-steel deck — no stripes, no banding */
  background:linear-gradient(180deg,#d7dce1 0%,#c6ccd2 100%) fixed;
}
.metal,.card,.navbar{ background-image:var(--brush),var(--sheen); background-blend-mode:soft-light,normal; }

/* faceplate navbar */
.navbar{
  position:relative; border-radius:0;
  border-top:1px solid var(--edge-hi);
  border-bottom:1px solid var(--edge-lo);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 1px 5px rgba(0,0,0,.16);
  padding:.55rem 30px;
}
.navbar .navbar-brand,.navbar .navbar-text,.navbar a{ color:var(--ink)!important; text-shadow:0 1px 0 var(--edge-hi); }
.navbar-brand img{ height:30px; width:auto; display:block; filter:drop-shadow(0 1px 0 rgba(255,255,255,.7)); }
.navbar-brand span{ letter-spacing:.5px; }

h1,h2,h3,h4{ color:var(--ink); text-shadow:0 1px 0 var(--edge-hi); letter-spacing:.2px; }

.card{
  border:1px solid var(--edge-lo); border-top-color:var(--edge-hi); border-radius:var(--radius);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 2px 9px rgba(0,0,0,.15);
}
.plate{
  background:#f4f6f7; border:1px solid var(--edge-lo); border-radius:var(--radius);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.14); padding:1rem 1.1rem;
}

.table{ background:transparent; }
.table>:not(caption)>*>*{ background:transparent; }
.table thead th{
  background:linear-gradient(180deg,var(--metal-hi),var(--metal-lo));
  border:1px solid var(--edge-lo); text-shadow:0 1px 0 var(--edge-hi); color:var(--ink-soft);
}
.table tbody td{ border:1px solid #d3d8dd; }

/* machined buttons */
.btn{
  border-radius:5px; border:1px solid var(--edge-lo);
  background-image:var(--brush),var(--sheen); color:var(--ink); text-shadow:0 1px 0 var(--edge-hi);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 1px 1px rgba(0,0,0,.13);
  transition:filter .08s, box-shadow .08s, transform .02s;
}
.btn:hover{ filter:brightness(1.04); }
.btn:active{ transform:translateY(1px); box-shadow:inset 0 2px 4px rgba(0,0,0,.3); }
.btn-primary,.btn-primary:focus{
  border-color:var(--accent-lo); background-image:linear-gradient(180deg,var(--accent-hi),var(--accent));
  color:#fff; text-shadow:0 1px 0 rgba(0,0,0,.35);
}
.btn-primary:hover{ background-image:linear-gradient(180deg,#3a7ad8,var(--accent)); }
.btn-danger{
  border-color:#7e211d; background-image:linear-gradient(180deg,var(--danger-hi),var(--danger));
  color:#fff; text-shadow:0 1px 0 rgba(0,0,0,.35);
}
.btn-outline-secondary,.btn-outline-light,.btn-outline-dark,.btn-link{ color:var(--ink); }

.form-control,.form-select{
  background:#fbfcfc; border:1px solid var(--edge-lo); color:var(--ink);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.12);
}
.form-control:focus,.form-select:focus{
  border-color:var(--accent);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.12), 0 0 0 .18rem rgba(28,78,163,.25);
}

/* engraved label-plate issue key */
.key-plate{
  font-family:'JetBrains Mono',Menlo,Consolas,monospace; font-size:.82em;
  padding:1px 7px; border-radius:3px; white-space:nowrap;
  background:linear-gradient(180deg,#3a3d42,#26282c); color:#e9edf0; border:1px solid #1c1e21;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 1px 1px rgba(255,255,255,.5);
  text-shadow:0 -1px 0 rgba(0,0,0,.6);
}
a.key-plate,.key-plate a{ color:#e9edf0; text-decoration:none; }

/* LED status chip — add class "led" plus a category class todo|in_progress|in_review|done */
.led{
  display:inline-flex; align-items:center; gap:.4em; padding:2px 9px 2px 8px; border-radius:11px;
  background:#e7eaec; border:1px solid var(--edge-lo); box-shadow:inset 0 1px 2px rgba(0,0,0,.12);
  font-size:.82rem; color:var(--ink-soft);
}
.led::before{ content:""; width:9px; height:9px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #c4c9ce, var(--led-steel)); }
.led.in_progress::before{ background:radial-gradient(circle at 35% 30%, #ffd27a, var(--led-amber)); box-shadow:0 0 6px 1px rgba(214,138,30,.6); }
.led.in_review::before{ background:radial-gradient(circle at 35% 30%, #8fb6f0, var(--led-blue)); box-shadow:0 0 6px 1px rgba(47,111,208,.6); }
.led.done::before{ background:radial-gradient(circle at 35% 30%, #8be0a3, var(--led-green)); box-shadow:0 0 6px 1px rgba(55,154,85,.6); }

/* login panel */
.login-panel{ max-width:400px; margin:6vh auto; }
.login-panel .brand{ text-align:center; margin-bottom:1.2rem; }
.login-panel .brand img{ height:58px; filter:drop-shadow(0 1px 0 rgba(255,255,255,.8)); }
.navbar-text img.rounded-circle{ border:1px solid var(--edge-lo); box-shadow:0 1px 2px rgba(0,0,0,.3); }