/* =========================================================================
   auth.wireon.ch admin — visual design lifted from Sendra's manager.
   All rules are scoped to body.auth-admin so PHP-Auth's own pages and
   anything else on this domain are unaffected.
   ========================================================================= */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap");

body.auth-admin {
  /* ---------- Color: ink & paper only ---------- */
  --ink: #000000;
  --paper: #FFFFFF;
  --ink-90: #1B1B1B;
  --ink-60: #727272;
  --ink-30: #AFAFAF;
  --ink-15: #D8D8D8;
  --ink-08: #E4E4E4;
  --ink-04: #F2F2F2;
  --ink-02: #F9F9F9;

  --fg-1: var(--ink);
  --fg-2: var(--ink-60);
  --rule-soft: var(--ink-08);

  /* ---------- Type ---------- */
  --font-display: "Inter", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  --font-ui:      "Inter", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --tr-display: -0.04em;
  --tr-tight: -0.02em;
  --tr-wide: 0.14em;

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  --bw-hair: 1px; --bw-rule: 2px; --bw-bar: 4px;

  --dur: 200ms;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

body.auth-admin {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums lining-nums;
}

body.auth-admin *,
body.auth-admin *::before,
body.auth-admin *::after { box-sizing: border-box; }

body.auth-admin h1,
body.auth-admin h2,
body.auth-admin h3,
body.auth-admin h4 {
  font-family: var(--font-display);
  margin: 0;
  color: var(--ink);
  font-weight: 800;
  letter-spacing: var(--tr-tight);
  text-transform: lowercase;
}
body.auth-admin h1 { font-size: 56px; line-height: 0.95; letter-spacing: var(--tr-display); font-weight: 900; }
body.auth-admin h2 { font-size: 36px; line-height: 1.0;  letter-spacing: var(--tr-display); font-weight: 900; }
body.auth-admin h3 { font-size: 22px; line-height: 1.15; font-weight: 800; }
body.auth-admin h4 { font-size: 16px; line-height: 1.2;  font-weight: 700; }
body.auth-admin p  { margin: 0; }
body.auth-admin a  { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
body.auth-admin a:hover { text-decoration-thickness: 2px; }
body.auth-admin code,
body.auth-admin pre { font-family: var(--font-mono); }
body.auth-admin ::selection { background: var(--ink); color: var(--paper); }

/* ---------- Page layout (sidebar + main) ---------- */

.auth-layout {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
}
.auth-main {
  flex: 1;
  min-width: 0;
  padding: var(--s-7);
}
@media (max-width: 1100px) { .auth-main { padding: var(--s-6); } }
@media (max-width: 720px)  { .auth-main { padding: var(--s-5) var(--s-4); } }

/* ---------- Sidebar ---------- */

.auth-sidebar {
  background: var(--ink);
  color: var(--paper);
  width: 240px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  padding: var(--s-5) 0;
  min-height: 100vh;
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
}
.auth-sidebar .mark {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 28px;
  letter-spacing: -0.04em;
  text-transform: lowercase;
  padding: 0 var(--s-5) var(--s-4);
  margin: 0 0 var(--s-4);
  border-bottom: 1px solid rgba(255,255,255,.22);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2);
  color: var(--paper);
}
.auth-sidebar .mark small {
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  opacity: .55;
  white-space: nowrap;
}
.auth-nav { display: flex; flex-direction: column; }
.auth-nav .nav-item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  color: var(--paper);
  text-decoration: none;
  padding: 12px var(--s-5);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  opacity: .65;
  border-left: 2px solid transparent;
  transition: opacity var(--dur) var(--ease);
}
.auth-nav .nav-item:hover { opacity: 1; text-decoration: none; }
.auth-nav .nav-item.active {
  opacity: 1;
  border-left-color: var(--paper);
  font-weight: 700;
}
.auth-sidebar-footer {
  margin-top: auto;
  padding: var(--s-3) var(--s-5) 0;
  border-top: 1px solid rgba(255,255,255,.22);
}
.auth-sidebar-footer .foot-btn {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
  background: transparent;
  border: 0;
  color: var(--paper);
  padding: 10px 0;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  opacity: .55;
  cursor: pointer;
  text-decoration: none;
}
.auth-sidebar-footer .foot-btn:hover { opacity: 1; text-decoration: none; }

/* Inline SVG icons inherit color. */
.carbon-icon { flex-shrink: 0; vertical-align: middle; }

/* ---------- Page header (above panels) ---------- */

.auth-page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--s-5);
  border-top: var(--bw-bar) solid var(--ink);
  border-bottom: var(--bw-rule) solid var(--ink);
  padding: var(--s-5) 0 var(--s-4);
  margin: 0 0 var(--s-7);
  flex-wrap: wrap;
}
.auth-page-header h1 { font-size: 48px; }
.auth-page-header .crumb {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--fg-2);
  margin-bottom: var(--s-2);
}
.auth-page-header .crumb a { color: var(--fg-2); text-decoration: none; }
.auth-page-header .crumb a:hover { color: var(--ink); text-decoration: underline; }
.auth-page-header .header-actions { display: flex; align-items: center; gap: var(--s-2); }

/* ---------- Panel (card) ---------- */

.panel {
  background: var(--paper);
  border: var(--bw-hair) solid var(--ink);
  padding: var(--s-6);
  margin: 0 0 var(--s-6);
}
.panel h3 {
  margin: 0 0 var(--s-5);
  padding-bottom: var(--s-3);
  border-bottom: var(--bw-rule) solid var(--ink);
}
.panel h3.with-icon {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
}
.panel-h3-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
  margin: 0 0 var(--s-5);
  padding-bottom: var(--s-3);
  border-bottom: var(--bw-rule) solid var(--ink);
}
.panel-h3-row h3 {
  margin: 0;
  padding: 0;
  border: 0;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 10px 18px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  border: var(--bw-hair) solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn:hover { background: var(--ink); color: var(--paper); text-decoration: none; }
.btn-primary, .btn-success {
  background: var(--ink);
  color: var(--paper);
}
.btn-primary:hover, .btn-success:hover {
  background: var(--paper);
  color: var(--ink);
}
.btn-secondary {
  background: var(--paper);
  color: var(--ink);
}
.btn-danger {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--ink);
}
.btn-danger:hover { background: var(--ink); color: var(--paper); }
.btn-sm { padding: 6px 12px; font-size: 10px; }

/* Inline form-around-button: shrink to fit, don't push siblings. */
form.inline { display: inline; margin: 0; }

/* ---------- Forms ---------- */

.group {
  display: block;
  margin: 0 0 var(--s-4);
}
.group label {
  display: block;
  margin: 0 0 var(--s-2);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--fg-2);
}
.group input[type="text"],
.group input[type="email"],
.group input[type="password"],
.group input[type="number"],
.group select,
.group textarea {
  width: 100%;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  background: var(--paper);
  color: var(--ink);
  border: var(--bw-hair) solid var(--ink);
  border-radius: 0;
  padding: 10px 12px;
}
.group input:focus,
.group select:focus,
.group textarea:focus {
  outline: var(--bw-rule) solid var(--ink);
  outline-offset: 2px;
}
.group .help {
  margin-top: var(--s-2);
  font-size: 12px;
  color: var(--fg-2);
}
.form-actions {
  display: flex;
  gap: var(--s-2);
  align-items: center;
  margin-top: var(--s-4);
}
.form-row {
  display: flex;
  gap: var(--s-3);
  align-items: flex-end;
  flex-wrap: wrap;
}
.form-row .group { margin-bottom: 0; flex: 1; min-width: 200px; }

/* ---------- Tables ---------- */

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-ui);
  font-size: 13px;
}
.data-table th,
.data-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: var(--bw-hair) solid var(--rule-soft);
  vertical-align: middle;
}
.data-table thead th {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--fg-2);
  border-bottom: var(--bw-hair) solid var(--ink);
}
.data-table tbody tr:hover { background: var(--ink-02); }
.data-table td.actions {
  white-space: nowrap;
  text-align: right;
}
.data-table td.actions form { display: inline-block; margin-left: var(--s-2); }
.data-table td .muted { color: var(--fg-2); font-size: 12px; }

/* ---------- Status / banners ---------- */

.banner {
  padding: var(--s-3) var(--s-4);
  border: var(--bw-hair) solid var(--ink);
  margin: 0 0 var(--s-5);
  font-size: 13px;
}
.banner.error {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}
.banner.success {
  border-color: var(--ink);
  background: var(--paper);
  color: var(--ink);
}

/* ---------- Empty state ---------- */

.empty {
  padding: var(--s-5);
  text-align: center;
  color: var(--fg-2);
  border: 1px dashed var(--ink-15);
}

/* ---------- One-shot api key (show-key.php) ---------- */

.api-key-callout {
  background: var(--ink);
  color: var(--paper);
  padding: var(--s-5);
  margin: var(--s-4) 0;
  border: var(--bw-rule) solid var(--ink);
}
.api-key-callout .label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  opacity: .65;
  margin-bottom: var(--s-2);
}
.api-key-callout .value {
  font-family: var(--font-mono);
  font-size: 14px;
  word-break: break-all;
  user-select: all;
  background: var(--ink-90);
  padding: var(--s-3);
  border: 1px solid var(--paper);
}
.api-key-callout .warn {
  margin-top: var(--s-3);
  font-size: 12px;
  opacity: .85;
}

/* ---------- Definition list ---------- */

.kv {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--s-2) var(--s-5);
  margin: 0 0 var(--s-5);
}
.kv dt {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--fg-2);
}
.kv dd { margin: 0; }

/* ---------- Sign-in / standalone card (login.php) ---------- */

.card {
  background: var(--paper);
  border: var(--bw-hair) solid var(--ink);
  padding: var(--s-7);
  max-width: 460px;
  margin: 96px auto;
}
.card h2 {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 900;
  letter-spacing: var(--tr-display);
  text-transform: lowercase;
  margin: 0 0 var(--s-5);
  padding-bottom: var(--s-3);
  border-bottom: var(--bw-rule) solid var(--ink);
}
.card form { margin-top: var(--s-4); }

/* ---------- Mobile sidebar collapse ---------- */
@media (max-width: 860px) {
  .auth-layout { flex-direction: column; }
  .auth-sidebar {
    width: 100%;
    height: auto;
    min-height: 0;
    position: relative;
    padding: var(--s-4);
    flex-direction: column;
    gap: var(--s-3);
  }
  .auth-sidebar .mark { padding: 0 0 var(--s-3); margin-bottom: var(--s-3); }
  .auth-nav { flex-direction: row; flex-wrap: wrap; }
  .auth-nav .nav-item { padding: 8px 12px; border-left: 0; border-bottom: 2px solid transparent; }
  .auth-nav .nav-item.active { border-left: 0; border-bottom-color: var(--paper); }
  .auth-sidebar-footer { padding: var(--s-3) 0 0; }
}