/* AdminGeekZ Client Area.
   A quiet operations desk, not a wall of cards: one dark rail that frames the
   app, a warm paper canvas, hairline rules instead of boxes, and the brand
   green used only where it means something (the active section, the primary
   action, the logo mark). Figures are tabular so columns line up.
   No external resource of any kind loads from this page. The logo mark is an
   inline SVG data URI. */

:root {
  --brand: #0B8B44;
  --brand-hover: #097338;
  --brand-lift: #97C93D;
  --brand-wash: #eaf4ee;

  --rail: #0e1a15;
  --rail-line: rgba(255, 255, 255, .09);
  --rail-text: #a7b6ad;
  --rail-strong: #f2f5f2;

  --paper: #fbfbfa;
  --surface: #fff;
  --fg: #141a17;
  --muted: #62706a;
  --faint: #98a29d;
  --rule: #e6e9e7;
  --rule-soft: #f0f2f0;
  --hover: #f5f7f5;

  --worse: #b8322c;
  --better: #14713f;

  --sans: "Manrope", "Bricolage Grotesque", ui-sans-serif, system-ui,
          -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;

  --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='32' x2='32' y2='0'%3E%3Cstop offset='0' stop-color='%230B8B44'/%3E%3Cstop offset='1' stop-color='%2397C93D'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='32' height='32' rx='9' fill='url(%23g)'/%3E%3Cpath d='M6 19h4.6l2.6-7.4 3.4 10.2 2.6-6.2 1.6 3.4H26' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }

.pt { max-width:1100px; overflow-wrap:anywhere; }
.pt-controls { display:flex; flex-wrap:wrap; gap:8px; margin:20px 0; }
.pt input,.pt select,.pt textarea,.pt button { font:inherit; padding:9px 12px; border:1px solid var(--rule); border-radius:6px; background:var(--surface); color:var(--fg); max-width:100%; }
.pt input[type=search] { flex:1; min-width:220px; }
.pt button { margin:4px; }
.pt button:hover { background:var(--brand-wash); }
.pt button:disabled { opacity:.5; cursor:default; }
.pt form { display:grid; gap:12px; margin:16px 0; }
.pt textarea { width:100%; resize:vertical; }
.pt-row { display:flex; flex-direction:column; padding:14px 10px; border-bottom:1px solid var(--rule); color:var(--fg); text-decoration:none; }
.pt-row:hover { background:var(--brand-wash); }
.pt-row span { color:var(--muted); font-size:13px; }
.pt article { border-top:1px solid var(--rule); padding:16px 0; }
.pt-markdown { white-space:pre-wrap; }
.pt-markdown pre { background:var(--rail); color:var(--rail-strong); padding:16px; overflow:auto; white-space:pre; }
.pt-markdown img,.pt-markdown video { max-width:100%; max-height:650px; display:block; }
.pt-files { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; }
.pt-files>div { display:flex; flex-direction:column; gap:8px; padding:10px; border:1px solid var(--rule); }
.pt-files img,.pt-files video { width:100%; max-height:280px; object-fit:contain; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--paper);
  color: var(--fg);
  font: 15px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Shared atoms ─────────────────────────────────────────────────────────── */

.mark {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  background: var(--mark) center / contain no-repeat;
}

.eyebrow {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--brand);
}

button { font: inherit; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* Sign in ──────────────────────────────────────────────────────────────── */

.login {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 48px 24px;
}

.login-form {
  width: 100%;
  max-width: 340px;
  animation: rise .45s cubic-bezier(.2, .7, .3, 1) both;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 34px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.015em;
}

.login-form h1 {
  margin: 0 0 6px;
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -.025em;
}

.login-form .sub {
  margin: 0 0 28px;
  color: var(--muted);
  font-size: 14px;
}

label {
  display: block;
  margin-bottom: 7px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--muted);
}

input[type="email"],
input[type="password"] {
  width: 100%;
  padding: 11px 13px;
  margin-bottom: 18px;
  font: inherit;
  font-size: 15px;
  color: var(--fg);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 9px;
  transition: border-color .15s, box-shadow .15s;
}

input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-wash);
}

.btn-primary {
  width: 100%;
  padding: 12px;
  font-weight: 700;
  letter-spacing: .01em;
  color: #fff;
  background: var(--brand);
  border: 0;
  border-radius: 9px;
  transition: background .15s;
}

.btn-primary:hover { background: var(--brand-hover); }
.btn-primary[disabled] { opacity: .55; cursor: default; }

.error {
  margin: 0 0 18px;
  padding: 10px 13px;
  font-size: 14px;
  color: var(--worse);
  background: #fdf1f0;
  border-left: 3px solid var(--worse);
  border-radius: 0 6px 6px 0;
}

.login-foot {
  font-size: 12px;
  color: var(--faint);
  text-align: center;
}

/* Shell ────────────────────────────────────────────────────────────────── */

.shell {
  display: flex;
  min-height: 100vh;
}

.side {
  width: 236px;
  flex: 0 0 236px;
  display: flex;
  flex-direction: column;
  background: var(--rail);
  color: var(--rail-text);
}

.side .brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 22px 22px 24px;
}

.side .brand .name {
  display: block;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.015em;
  color: var(--rail-strong);
}

.side .brand .kicker {
  display: block;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
}

.side nav {
  flex: 1;
  padding: 4px 12px;
}

.side nav button {
  display: block;
  width: 100%;
  padding: 9px 12px;
  margin-bottom: 2px;
  text-align: left;
  font-size: 14px;
  font-weight: 600;
  color: var(--rail-text);
  background: none;
  border: 0;
  border-radius: 7px;
  transition: color .15s, background .15s;
}

.side nav button:hover { color: var(--rail-strong); background: rgba(255, 255, 255, .05); }

.side nav button.active {
  color: var(--rail-strong);
  background: rgba(255, 255, 255, .08);
  box-shadow: inset 3px 0 0 var(--brand-lift);
}

.side .account {
  padding: 18px 22px 22px;
  border-top: 1px solid var(--rail-line);
  font-size: 13px;
}

.side .account .who {
  display: block;
  margin-bottom: 12px;
  color: var(--rail-text);
  overflow-wrap: anywhere;
}

.side .account button {
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--rail-text);
  background: none;
  border: 1px solid var(--rail-line);
  border-radius: 7px;
  transition: color .15s, background .15s;
}

.side .account button:hover { color: var(--rail-strong); background: rgba(255, 255, 255, .07); }

.main {
  flex: 1;
  min-width: 0;
  padding: 52px 48px 64px;
}

.page {
  max-width: 920px;
  animation: rise .4s cubic-bezier(.2, .7, .3, 1) both;
}

.page h2 {
  margin: 0 0 6px;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.03em;
}

.page .sub {
  margin: 0 0 38px;
  max-width: 60ch;
  color: var(--muted);
  font-size: 15px;
}

/* Report table — rules, not boxes ──────────────────────────────────────── */

.table-wrap { overflow-x: auto; }

table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

th {
  padding: 0 16px 10px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--faint);
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}

td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--rule-soft);
  white-space: nowrap;
}

th:first-child, td:first-child { padding-left: 4px; }
th:last-child, td:last-child { padding-right: 4px; }

tbody tr {
  cursor: pointer;
  transition: background .12s;
}

tbody tr:hover, tbody tr:focus-within { background: var(--hover); }

.date a {
  color: inherit;
  font-weight: 700;
  letter-spacing: -.01em;
  text-decoration: none;
}

.date a:hover { text-decoration: underline; text-underline-offset: 3px; }
.server { color: var(--muted); font-family: var(--mono); font-size: 13px; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.num.total { font-weight: 700; }

/* Downloads: quiet chips at the end of the row. They must read as secondary to
   the report link itself, so they carry no fill until hover. */
th.files, td.files { text-align: right; }

.files a {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 7px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--faint);
  text-decoration: none;
  border: 1px solid var(--rule);
  border-radius: 6px;
  transition: color .15s, border-color .15s, background .15s;
}

.files a:first-child { margin-left: 0; }
.files a:hover { color: var(--brand); border-color: var(--brand); background: var(--brand-wash); }

/* The raw log carries its size, because it can be gigabytes and a customer
   deserves to know that before the click, not after it. */
.files .size { margin-left: 6px; font-weight: 500; opacity: .75; }

.delta {
  display: inline-block;
  min-width: 6.5ch;
  text-align: right;
  font-weight: 700;
}

.delta .arrow { margin-right: 5px; font-size: 11px; }
.up { color: var(--worse); }
.down { color: var(--better); }
.flat { color: var(--faint); font-weight: 500; }

.empty {
  padding: 56px 4px;
  color: var(--muted);
  font-size: 14px;
}

/* Pagination ───────────────────────────────────────────────────────────── */

.pager {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  font-size: 13px;
  color: var(--muted);
}

.pager button {
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 8px;
  transition: background .15s, border-color .15s;
}

.pager button:hover:not([disabled]) { background: var(--hover); border-color: #d6dad8; }
.pager button[disabled] { color: var(--faint); background: none; cursor: default; }
.pager .count { margin-left: 4px; }

@keyframes rise {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Phone: the rail becomes a header, the menu a scrolling row ───────────── */

@media (max-width: 760px) {
  .shell { display: block; }

  .side {
    width: auto;
    flex: none;
    display: block;
    padding-bottom: 6px;
  }

  .side .brand { padding: 16px 18px 14px; }

  .side nav {
    display: flex;
    gap: 4px;
    padding: 0 12px 8px;
    overflow-x: auto;
  }

  .side nav button {
    width: auto;
    margin: 0;
    white-space: nowrap;
  }

  .side nav button.active { box-shadow: inset 0 -3px 0 var(--brand-lift); }

  .side .account {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 18px;
  }

  .side .account .who { margin: 0; font-size: 12px; }

  th, td { padding-left: 11px; padding-right: 11px; }
  td { padding-top: 13px; padding-bottom: 13px; }

  .main { padding: 28px 18px 48px; }
  .page h2 { font-size: 23px; }
  .page .sub { margin-bottom: 26px; }
  .table-wrap { margin: 0 -18px; padding: 0 18px; }
}