@layer reset, base, components, utilities;

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  button {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    cursor: pointer;
  }
  input,
  textarea,
  select {
    font: inherit;
    color: inherit;
  }
  a {
    color: inherit;
    text-decoration: none;
  }
}

:root {
  /* Cool zinc base + emerald accent — mirrors livepeer-open-clearinghouse */
  --bg: #09090b;            /* zinc-950 */
  --fg: #fafafa;            /* zinc-50 */
  --muted: #71717a;         /* zinc-500 */
  --muted-2: #52525b;       /* zinc-600 */
  --surface: rgba(24, 24, 27, 0.6);    /* zinc-900/60 — primary card */
  --surface-soft: rgba(24, 24, 27, 0.3); /* zinc-900/30 — translucent overlay */
  --surface-hover: rgba(39, 39, 42, 0.5); /* zinc-800/50 */
  --surface-2: #27272a;     /* zinc-800 solid */
  --border: #27272a;        /* zinc-800 */
  --border-strong: #3f3f46; /* zinc-700 */
  --accent: #34d399;        /* emerald-400 */
  --accent-strong: #10b981; /* emerald-500 */
  --accent-fg: #052e16;     /* near-black, readable on emerald */
  --accent-tint: rgba(52, 211, 153, 0.1);
  --accent-tint-strong: rgba(52, 211, 153, 0.2);

  /* status accents */
  --ok: #34d399;            /* emerald-400 */
  --ok-tint: rgba(52, 211, 153, 0.15);
  --warn: #fbbf24;          /* amber-400 */
  --warn-tint: rgba(251, 191, 36, 0.15);
  --danger: #f87171;        /* red-400 */
  --danger-tint: rgba(248, 113, 113, 0.15);
  --info: #38bdf8;          /* sky-400 */
  --info-tint: rgba(56, 189, 248, 0.15);
  --role: #c084fc;          /* purple-400 */
  --role-tint: rgba(192, 132, 252, 0.15);

  /* shape */
  --radius-sm: 6px;
  --radius: 8px;            /* rounded-lg */
  --radius-lg: 12px;        /* rounded-xl */
  --radius-xl: 16px;        /* rounded-2xl */
  --radius-pill: 999px;

  /* type */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

@layer base {
  html,
  body {
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.5;
    min-height: 100%;
  }
  body {
    margin: 0;
  }
  h1 {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: 12px;
  }
  h2 {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: 12px;
  }
  h3 {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 10px;
  }
  p {
    margin-bottom: 8px;
  }
  a {
    color: var(--accent);
    transition: color 80ms ease;
  }
  a:hover {
    color: var(--accent-strong);
  }
  code,
  pre {
    font-family: var(--font-mono);
    font-size: 13px;
  }
}

@layer components {
  /* ----- layout ----- */
  .page {
    max-width: 1080px;
    margin: 0 auto;
    padding: 24px;
  }

  /* shell = topbar + sidebar + content area */
  .shell {
    display: grid;
    grid-template-columns: 240px 1fr;
    grid-template-rows: auto 1fr;
    min-height: 100vh;
  }
  .shell-topbar {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 16px;
    min-height: 44px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-soft);
    font-size: 13px;
  }
  .shell-topbar .brand {
    font-size: 14px;
  }
  .shell-topbar button {
    padding: 4px 10px;
    font-size: 13px;
    font-weight: 500;
  }
  .shell-sidebar {
    border-right: 1px solid var(--border);
    padding: 16px 12px;
    background: var(--surface-soft);
  }
  .shell-content {
    padding: 20px 24px;
    overflow-y: auto;
  }
  .sidebar-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: var(--radius);
    color: var(--muted);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 80ms ease, color 80ms ease;
    margin-bottom: 2px;
  }
  .sidebar-item:hover {
    color: var(--fg);
    background: var(--surface-hover);
  }
  .sidebar-item.active {
    color: var(--accent);
    background: var(--accent-tint);
  }
  .sidebar-section {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted-2);
    padding: 12px 12px 6px;
  }

  /* hamburger only on narrow viewports */
  .hamburger {
    display: none;
    color: var(--fg);
    cursor: pointer;
    padding: 4px;
    border-radius: var(--radius);
  }
  .hamburger:hover {
    background: var(--surface-hover);
  }

  /* mobile: collapse sidebar into an overlay drawer */
  @media (max-width: 760px) {
    .shell {
      grid-template-columns: 1fr;
    }
    .shell-sidebar {
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      width: 260px;
      background: var(--bg);
      border-right: 1px solid var(--border-strong);
      transform: translateX(-100%);
      transition: transform 160ms ease;
      z-index: 20;
      padding-top: 24px;
    }
    .shell-sidebar.open {
      transform: translateX(0);
    }
    .shell-sidebar-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.5);
      z-index: 15;
    }
    .hamburger {
      display: inline-flex;
      align-items: center;
    }
  }

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 16px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--border);
  }
  .brand {
    font-weight: 600;
    color: var(--accent);
    letter-spacing: -0.01em;
  }
  .nav {
    display: flex;
    gap: 16px;
    align-items: center;
  }

  /* ----- cards ----- */
  .card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px;
    margin-bottom: 16px;
  }
  .card-soft {
    background: var(--surface-soft);
  }
  .card-tight {
    padding: 12px;
  }

  /* ----- forms ----- */
  .form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 360px;
  }
  .field {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  label {
    font-size: 12px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 500;
  }
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  select,
  textarea {
    background: var(--surface-hover);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    padding: 8px 12px;
    font-size: 14px;
    color: var(--fg);
    transition: border-color 80ms ease;
  }
  input:focus,
  select:focus,
  textarea:focus {
    outline: none;
    border-color: var(--accent);
  }
  input::placeholder {
    color: var(--muted-2);
  }

  /* ----- buttons ----- */
  .btn,
  button.primary,
  button.ghost,
  button.danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: var(--radius);
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid var(--border-strong);
    background: var(--surface-hover);
    color: var(--fg);
    transition:
      background 80ms ease,
      border-color 80ms ease,
      color 80ms ease;
  }
  button.primary {
    background: var(--accent-strong);
    color: var(--accent-fg);
    border-color: var(--accent-strong);
    font-weight: 600;
  }
  button.primary:hover:not(:disabled) {
    background: var(--accent);
    border-color: var(--accent);
  }
  button.ghost {
    background: transparent;
  }
  button.ghost:hover:not(:disabled) {
    background: var(--surface-hover);
    border-color: var(--border-strong);
    color: var(--accent);
  }
  button.danger {
    background: var(--danger);
    color: #1f0a0a;
    border-color: var(--danger);
    font-weight: 600;
  }
  button.danger:hover:not(:disabled) {
    filter: brightness(1.05);
  }
  button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
  }

  /* ----- tables ----- */
  table {
    width: 100%;
    border-collapse: collapse;
  }
  th,
  td {
    text-align: left;
    padding: 10px 8px;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
  }
  th {
    color: var(--muted);
    font-weight: 500;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  tbody tr {
    transition: background 80ms ease;
  }
  tbody tr:hover {
    background: var(--surface-hover);
  }

  /* ----- status pills ----- */
  .pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 500;
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    color: var(--fg);
  }
  .pill.ok {
    color: var(--ok);
    background: var(--ok-tint);
    border-color: transparent;
  }
  .pill.warn {
    color: var(--warn);
    background: var(--warn-tint);
    border-color: transparent;
  }
  .pill.bad {
    color: var(--danger);
    background: var(--danger-tint);
    border-color: transparent;
  }
  .pill.info {
    color: var(--info);
    background: var(--info-tint);
    border-color: transparent;
  }
  .pill.role {
    color: var(--role);
    background: var(--role-tint);
    border-color: transparent;
  }

  /* ----- inline messages ----- */
  .msg {
    padding: 10px 14px;
    border-radius: var(--radius);
    border: 1px solid var(--border-strong);
    background: var(--surface-soft);
    font-size: 13px;
    color: var(--fg);
  }
  .msg.error {
    color: var(--danger);
    background: var(--danger-tint);
    border-color: transparent;
  }
  .msg.ok {
    color: var(--ok);
    background: var(--ok-tint);
    border-color: transparent;
  }
  .msg.warn {
    color: var(--warn);
    background: var(--warn-tint);
    border-color: transparent;
  }
  .msg.compact {
    padding: 4px 10px;
    font-size: 12px;
  }

  /* ----- one-shot secret display ----- */
  .secret {
    font-family: var(--font-mono);
    background: var(--surface-2);
    padding: 12px;
    border-radius: var(--radius);
    word-break: break-all;
    border: 1px dashed var(--warn);
    color: var(--warn);
    font-size: 13px;
  }

  /* ----- modal ----- */
  .modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    display: grid;
    place-items: center;
    z-index: 10;
  }
  .modal-card {
    background: var(--bg);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    padding: 24px;
    min-width: 360px;
    max-width: 92vw;
    max-height: 92vh;
    overflow: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  }

  /* ----- stat metric cards (hero grid) ----- */
  .metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
  }
  .metric {
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px 18px;
  }
  .metric .label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    margin-bottom: 8px;
  }
  .metric .value {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
  }
  .metric .sub {
    font-size: 12px;
    color: var(--muted-2);
    margin-top: 6px;
  }
  .metric.accent .value {
    color: var(--accent);
  }
  .metric.warn .value {
    color: var(--warn);
  }
  .metric.info .value {
    color: var(--info);
  }
  .metric.bad .value {
    color: var(--danger);
  }
}

@layer utilities {
  .row {
    display: flex;
    gap: 12px;
    align-items: center;
  }
  .col {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .grow {
    flex-grow: 1;
  }
  .muted {
    color: var(--muted);
  }
  .accent {
    color: var(--accent);
  }
  .mono {
    font-family: var(--font-mono);
  }
  .small {
    font-size: 12px;
  }
  .mt-1 {
    margin-top: 8px;
  }
  .mt-2 {
    margin-top: 16px;
  }
  .mt-3 {
    margin-top: 24px;
  }
  .mb-2 {
    margin-bottom: 16px;
  }
  .hide {
    display: none;
  }
  .right {
    text-align: right;
  }
}