@layer reset, base, components, modules, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  img, svg { display: block; max-width: 100%; }
  button, input, select, textarea { font: inherit; }
}

@layer base {
  :root {
    --color-bg:            oklch(98% 0.005 250);
    --color-bg-subtle:     oklch(95% 0.008 250);
    --color-bg-raised:     oklch(100% 0 0);
    --color-border:        oklch(88% 0.01 250);
    --color-border-subtle: oklch(92% 0.008 250);
    --color-text:          oklch(20% 0.01 250);
    --color-text-subtle:   oklch(50% 0.01 250);
    --color-text-faint:    oklch(70% 0.008 250);

    --color-accent:        oklch(55% 0.22 290);
    --color-accent-hover:  oklch(50% 0.22 290);
    --color-accent-subtle: oklch(95% 0.04 290);

    --color-success:    oklch(55% 0.18 145);
    --color-success-bg: oklch(96% 0.04 145);
    --color-warning:    oklch(60% 0.16 80);
    --color-warning-bg: oklch(97% 0.04 80);
    --color-danger:     oklch(55% 0.2 25);
    --color-danger-bg:  oklch(97% 0.04 25);
    --color-neutral:    oklch(55% 0.01 250);
    --color-neutral-bg: oklch(93% 0.01 250);

    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-full: 999px;

    --space-1: 4px;   --space-2: 8px;   --space-3: 12px;
    --space-4: 16px;  --space-5: 20px;  --space-6: 24px;
    --space-8: 32px;  --space-10: 40px; --space-12: 48px;

    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: "SF Mono", "Fira Code", "Cascadia Code", monospace;
    --font-size-xs:   11px;
    --font-size-sm:   13px;
    --font-size-base: 15px;
    --font-size-lg:   18px;
    --font-size-xl:   24px;
    --font-size-2xl:  32px;

    --shadow-sm: 0 1px 2px oklch(0% 0 0 / 6%);
    --shadow-md: 0 2px 8px oklch(0% 0 0 / 8%), 0 1px 2px oklch(0% 0 0 / 4%);
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --color-bg:            oklch(16% 0.01 250);
      --color-bg-subtle:     oklch(20% 0.01 250);
      --color-bg-raised:     oklch(22% 0.015 250);
      --color-border:        oklch(30% 0.015 250);
      --color-border-subtle: oklch(26% 0.012 250);
      --color-text:          oklch(93% 0.005 250);
      --color-text-subtle:   oklch(65% 0.008 250);
      --color-text-faint:    oklch(45% 0.008 250);

      --color-accent:        oklch(68% 0.22 290);
      --color-accent-hover:  oklch(73% 0.22 290);
      --color-accent-subtle: oklch(25% 0.06 290);

      --color-success:    oklch(68% 0.18 145);
      --color-success-bg: oklch(22% 0.06 145);
      --color-warning:    oklch(75% 0.16 80);
      --color-warning-bg: oklch(22% 0.06 80);
      --color-danger:     oklch(68% 0.2 25);
      --color-danger-bg:  oklch(22% 0.06 25);
      --color-neutral:    oklch(60% 0.01 250);
      --color-neutral-bg: oklch(26% 0.01 250);

      --shadow-sm: 0 1px 2px oklch(0% 0 0 / 30%);
      --shadow-md: 0 2px 8px oklch(0% 0 0 / 40%), 0 1px 2px oklch(0% 0 0 / 20%);
    }
  }

  html {
    font-family: var(--font-sans);
    font-size: var(--font-size-base);
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }

  a { color: var(--color-accent); text-decoration: none; }
  a:hover { text-decoration: underline; }
  h1, h2, h3 { line-height: 1.25; font-weight: 600; }
}

@layer components {
  .btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
    white-space: nowrap;
    transition: background 120ms, color 120ms, border-color 120ms;
    text-decoration: none;
  }
  .btn:hover { text-decoration: none; }

  .btn-primary { background: var(--color-accent); color: oklch(100% 0 0); }
  .btn-primary:hover { background: var(--color-accent-hover); }

  .btn-secondary {
    background: var(--color-bg-raised);
    color: var(--color-text);
    border-color: var(--color-border);
    box-shadow: var(--shadow-sm);
  }
  .btn-secondary:hover { background: var(--color-bg-subtle); }

  .btn-danger {
    background: var(--color-danger-bg);
    color: var(--color-danger);
    border-color: color-mix(in oklch, var(--color-danger) 30%, transparent);
  }
  .btn-danger:hover { background: color-mix(in oklch, var(--color-danger) 18%, transparent); }

  .btn-ghost { background: transparent; color: var(--color-text-subtle); }
  .btn-ghost:hover { background: var(--color-bg-subtle); color: var(--color-text); }

  .btn-sm { padding: 3px var(--space-3); font-size: var(--font-size-xs); }

  .badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
  }
  .badge-running   { background: var(--color-success-bg); color: var(--color-success); }
  .badge-deploying { background: var(--color-warning-bg); color: var(--color-warning); }
  .badge-failed    { background: var(--color-danger-bg);  color: var(--color-danger); }
  .badge-stopped   { background: var(--color-neutral-bg); color: var(--color-neutral); }
  .badge-pending   { background: var(--color-neutral-bg); color: var(--color-neutral); }
  .badge-succeeded { background: var(--color-success-bg); color: var(--color-success); }
  .badge-unknown   { background: var(--color-neutral-bg); color: var(--color-neutral); }

  .app-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-8);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-raised);
  }
  .nav-brand {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-text);
    text-decoration: none;
    letter-spacing: -0.02em;
  }
  .nav-brand:hover { text-decoration: none; }
  .nav-right { display: flex; align-items: center; gap: var(--space-3); }
  .nav-avatar { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--color-border); }

  .page { max-width: 960px; margin-inline: auto; padding: var(--space-8); }

  .page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: var(--space-8);
    gap: var(--space-4);
  }
  .page-title { font-size: var(--font-size-xl); font-weight: 700; letter-spacing: -0.02em; }
  .page-subtitle { font-size: var(--font-size-sm); color: var(--color-text-subtle); margin-top: var(--space-1); }

  .card {
    background: var(--color-bg-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
  }

  .table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }
  .table th {
    text-align: left;
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-subtle);
    border-bottom: 1px solid var(--color-border);
  }
  .table td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border-subtle);
    vertical-align: middle;
  }
  .table tr:last-child td { border-bottom: none; }
  .table tr:hover td { background: var(--color-bg-subtle); }

  .field { display: flex; flex-direction: column; gap: var(--space-2); }
  .field label { font-size: var(--font-size-sm); font-weight: 500; }

  .input {
    padding: 7px var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-raised);
    color: var(--color-text);
    font-size: var(--font-size-sm);
    width: 100%;
    transition: border-color 120ms, box-shadow 120ms;
  }
  .input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-accent) 15%, transparent);
  }

  .tabs {
    display: flex;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--space-6);
  }
  .tab {
    padding: var(--space-3) var(--space-5);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-subtle);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    text-decoration: none;
    transition: color 120ms;
  }
  .tab:hover { color: var(--color-text); text-decoration: none; }
  .tab.active { color: var(--color-accent); border-bottom-color: var(--color-accent); }

  .empty-state { text-align: center; padding: var(--space-12) var(--space-8); }
  .empty-state-title { font-size: var(--font-size-lg); font-weight: 600; margin-bottom: var(--space-2); }
  .empty-state-description { font-size: var(--font-size-sm); color: var(--color-text-subtle); margin-bottom: var(--space-6); }

  .flash { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); font-size: var(--font-size-sm); margin-bottom: var(--space-4); }
  .flash-notice { background: var(--color-success-bg); color: var(--color-success); }
  .flash-alert  { background: var(--color-danger-bg);  color: var(--color-danger); }

  .log-output {
    background: oklch(12% 0.01 250);
    color: oklch(85% 0.01 250);
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    line-height: 1.7;
    padding: var(--space-4);
    border-radius: var(--radius-md);
    overflow-x: auto;
    white-space: pre-wrap;
    min-height: 200px;
  }
  .log-warn  { color: oklch(80% 0.18 80); }
  .log-error { color: oklch(70% 0.2 25); }
}

@layer modules {
  .app-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-4);
  }

  .app-card {
    display: block;
    padding: var(--space-5);
    text-decoration: none;
    transition: box-shadow 150ms, transform 150ms;
  }
  .app-card:hover { text-decoration: none; box-shadow: var(--shadow-md); transform: translateY(-1px); }
  .app-card-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: var(--space-3); }
  .app-card-name { font-size: var(--font-size-base); font-weight: 600; color: var(--color-text); }
  .app-card-url {
    font-size: var(--font-size-xs);
    color: var(--color-text-subtle);
    font-family: var(--font-mono);
    margin-bottom: var(--space-4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .app-card-meta { display: flex; align-items: center; gap: var(--space-3); font-size: var(--font-size-xs); color: var(--color-text-faint); }

  .app-hero {
    background: var(--color-bg-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin-bottom: var(--space-6);
    box-shadow: var(--shadow-sm);
  }
  .app-hero-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: var(--space-5); }
  .app-hero-name { font-size: var(--font-size-xl); font-weight: 700; letter-spacing: -0.02em; margin-bottom: var(--space-1); }
  .app-hero-url { font-family: var(--font-mono); font-size: var(--font-size-sm); color: var(--color-accent); }
  .app-hero-actions { display: flex; gap: var(--space-2); }
  .app-hero-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-4);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border-subtle);
  }
  .meta-label {
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-faint);
    margin-bottom: var(--space-1);
  }
  .meta-value { font-size: var(--font-size-sm); color: var(--color-text); font-weight: 500; }
  .meta-value a { color: var(--color-text); font-family: var(--font-mono); font-size: var(--font-size-xs); }

  .deployment-row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    border-bottom: 1px solid var(--color-border-subtle);
    text-decoration: none;
    color: var(--color-text);
    transition: background 120ms;
  }
  .deployment-row:last-child { border-bottom: none; }
  .deployment-row:hover { background: var(--color-bg-subtle); text-decoration: none; }
  .deployment-sha { font-family: var(--font-mono); font-size: var(--font-size-xs); color: var(--color-text-subtle); width: 56px; flex-shrink: 0; }
  .deployment-message { flex: 1; font-size: var(--font-size-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .deployment-meta { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; font-size: var(--font-size-xs); color: var(--color-text-faint); }

  .env-row {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border-subtle);
  }
  .env-row:last-child { border-bottom: none; }
  .env-key { font-family: var(--font-mono); font-size: var(--font-size-sm); font-weight: 600; }
  .env-value { font-family: var(--font-mono); font-size: var(--font-size-sm); color: var(--color-text-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
  .login-card { width: 100%; max-width: 360px; padding: var(--space-10); text-align: center; }
  .login-logo { font-size: var(--font-size-2xl); font-weight: 800; letter-spacing: -0.04em; margin-bottom: var(--space-2); }
  .login-tagline { font-size: var(--font-size-sm); color: var(--color-text-subtle); margin-bottom: var(--space-8); }

  .danger-zone {
    border: 1px solid color-mix(in oklch, var(--color-danger) 30%, transparent);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin-top: var(--space-8);
  }
  .danger-zone h3 { font-size: var(--font-size-sm); font-weight: 600; color: var(--color-danger); margin-bottom: var(--space-2); }
  .danger-zone p { font-size: var(--font-size-sm); color: var(--color-text-subtle); margin-bottom: var(--space-4); }

  .form-stack { display: flex; flex-direction: column; gap: var(--space-5); max-width: 480px; }
}

@layer utilities {
  .hidden      { display: none; }
  .text-subtle { color: var(--color-text-subtle); }
  .text-faint  { color: var(--color-text-faint); }
  .text-sm     { font-size: var(--font-size-sm); }
  .text-xs     { font-size: var(--font-size-xs); }
  .mono        { font-family: var(--font-mono); }
  .mt-4  { margin-top: var(--space-4); }
  .mt-6  { margin-top: var(--space-6); }
  .mt-8  { margin-top: var(--space-8); }
  .flex  { display: flex; }
  .items-center { align-items: center; }
  .gap-2 { gap: var(--space-2); }
  .gap-3 { gap: var(--space-3); }
}