/*
  The admin's own look: the website's colours, none of its drama.

  It is a tool, not a brochure — the gold is used to say "this is the important button" and
  nowhere else, the text is dark on light, and every form field is wide enough to show the sentence
  it holds. Nothing here loads from another server, so it also works on a machine in a plant with
  no outside access.
*/

:root {
  --gold: #c8a24a;
  --gold-deep: #a07f2e;
  --coal: #0e1116;
  --ink: #1b1f26;
  --ink-muted: #5d6675;
  --line: #dfe2e8;
  --paper: #f6f6f4;
  --white: #fff;
  --bad: #b3261e;
  --good: #2c6b41;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

a { color: var(--gold-deep); }

/* --- frame --- */

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  height: 56px;
  background: var(--coal);
  color: var(--white);
}

.brand { color: var(--white); font-weight: 700; letter-spacing: .08em; text-decoration: none; }
.brand span { color: var(--gold); font-weight: 400; letter-spacing: .02em; }

.out { display: flex; align-items: center; gap: 12px; }
.who { color: #b8bec9; font-size: 13px; }
.out button {
  background: none; border: 1px solid #39404c; color: #d7dbe2;
  padding: 5px 12px; border-radius: 2px; cursor: pointer; font-size: 13px;
}
.out button:hover { border-color: var(--gold); color: var(--gold); }

.shell { display: grid; grid-template-columns: 220px 1fr; min-height: calc(100vh - 56px); }

.side { background: var(--white); border-right: 1px solid var(--line); padding: 18px 0; }
.side a {
  display: block; padding: 8px 24px; color: var(--ink); text-decoration: none; font-size: 14px;
  border-left: 3px solid transparent;
}
.side a:hover { background: var(--paper); }
.side a.on { border-left-color: var(--gold); font-weight: 600; background: var(--paper); }
.side .group {
  margin: 18px 0 4px; padding: 0 24px; font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-muted);
}

main { padding: 28px 32px 64px; max-width: 980px; }

/* --- text --- */

h1 { font-size: 24px; margin: 0 0 4px; }
h2 { font-size: 17px; margin: 32px 0 10px; }
.lead { color: var(--ink-muted); margin: 0 0 24px; }
.hint { color: var(--ink-muted); font-size: 13px; }

.flash {
  border-left: 3px solid var(--good); background: #eaf3ed; padding: 10px 14px; margin: 0 0 20px;
}

/* --- lists --- */

table { width: 100%; border-collapse: collapse; background: var(--white); border: 1px solid var(--line); }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-muted); }
tr:last-child td { border-bottom: none; }
td .sub { display: block; color: var(--ink-muted); font-size: 13px; }

.tag { font-size: 12px; padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px; }
.tag.live { border-color: #bcdcc8; background: #eaf3ed; color: var(--good); }
.tag.draft { border-color: #e6d9b4; background: #fbf5e6; color: var(--gold-deep); }
.tag.off { color: var(--bad); border-color: #eccbc9; background: #fbeceb; }

/* --- forms --- */

.card { background: var(--white); border: 1px solid var(--line); padding: 20px 22px; margin-bottom: 18px; }
.card h3 { margin: 0 0 14px; font-size: 15px; }

label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 14px; }
label .key { font-weight: 400; color: var(--ink-muted); font-family: ui-monospace, Menlo, Consolas, monospace; }

input[type=text], input[type=email], input[type=password], input[type=tel], textarea, select {
  width: 100%; margin-top: 4px; padding: 8px 10px; font: inherit;
  border: 1px solid var(--line); background: var(--white); border-radius: 2px;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--gold); }
textarea { resize: vertical; min-height: 72px; }

.two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
@media (max-width: 760px) { .two { grid-template-columns: 1fr; } .shell { grid-template-columns: 1fr; } }

.check { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; }
.check input { width: auto; margin: 0; }

.actions { display: flex; align-items: center; gap: 14px; margin-top: 22px; }

button.save, .btn {
  background: var(--gold); color: var(--coal); border: none; padding: 10px 22px;
  font: inherit; font-weight: 600; border-radius: 2px; cursor: pointer; text-decoration: none;
}
button.save:hover, .btn:hover { background: var(--gold-deep); color: var(--white); }
button.plain {
  background: none; border: 1px solid var(--line); padding: 7px 14px; font: inherit;
  border-radius: 2px; cursor: pointer;
}
button.plain:hover { border-color: var(--ink-muted); }
button.danger { color: var(--bad); }
button.danger:hover { border-color: var(--bad); }

/* --- pictures --- */

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
.shot { background: var(--white); border: 1px solid var(--line); }
.shot img { display: block; width: 100%; height: 130px; object-fit: cover; background: var(--paper); }
.shot .meta { padding: 8px 10px; font-size: 12px; color: var(--ink-muted); }
.shot .meta strong { display: block; color: var(--ink); font-weight: 600; word-break: break-all; }

/* --- history --- */

.diff { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; }
.diff .was { color: var(--bad); text-decoration: line-through; }
.diff .now { color: var(--good); }

/* --- the login page --- */

.entry { display: grid; place-items: center; min-height: 100vh; background: var(--coal); }
.entry form { width: min(380px, calc(100vw - 40px)); background: var(--white); padding: 32px; }
.entry h1 { letter-spacing: .08em; }
.entry .mark { color: var(--gold); }
.entry .error { border-left: 3px solid var(--bad); background: #fbeceb; padding: 9px 12px; margin-bottom: 16px; font-size: 14px; }
.entry button { width: 100%; margin-top: 8px; }

/* --- the customer's side ----------------------------------------------------
   Same house, different job. The admin is a desk; this is opened on a phone in a
   hall, usually because something has stopped. So: one row of tabs instead of a
   sidebar, the reporting button always visible, and nothing that needs a mouse. */

.tabs {
  display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
  background: var(--white); border-bottom: 1px solid var(--line); padding: 0 24px;
}
.tabs a {
  padding: 13px 14px; color: var(--ink); text-decoration: none; font-size: 14px;
  border-bottom: 3px solid transparent;
}
.tabs a:hover { color: var(--gold-deep); }
.tabs a.on { border-bottom-color: var(--gold); font-weight: 600; }
.tabs a.report {
  margin-left: auto; background: var(--gold); color: var(--coal); font-weight: 600;
  border-bottom: none; padding: 9px 18px; border-radius: 2px;
}
.tabs a.report:hover { background: var(--gold-deep); color: var(--white); }

main.wide { max-width: 1100px; }

/* The one number that matters on the overview. */
.headline {
  background: var(--white); border: 1px solid var(--line); border-left: 3px solid var(--gold);
  padding: 22px 24px; margin-bottom: 24px;
}
.headline strong { display: block; font-size: 22px; margin-bottom: 4px; }

.urgent { color: var(--bad); font-weight: 600; }

.when { white-space: nowrap; }

@media (max-width: 620px) {
  .tabs { padding: 0 16px; }
  .tabs a.report { margin: 8px 0 8px auto; }
  main { padding: 20px 16px 56px; }
  table, thead, tbody, tr, td, th { display: block; }
  thead { display: none; }
  tr { border-bottom: 1px solid var(--line); padding: 10px 0; }
  td { border: none; padding: 3px 14px; }
}