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

:root {
  --color-brand: #18E299;
  --color-brand-light: #d4fae8;
  --color-brand-deep: #0fa76e;
  --color-text-primary: #0d0d0d;
  --color-text-secondary: #333333;
  --color-text-tertiary: #666666;
  --color-text-muted: #888888;
  --color-bg-primary: #ffffff;
  --color-bg-subtle: #fafafa;
  --color-border-subtle: rgba(0, 0, 0, 0.05);
  --color-border-medium: rgba(0, 0, 0, 0.08);
  --color-accent-amber: #c37d0d;
  --color-accent-blue: #3772cf;
  --color-accent-red: #d45656;
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, monospace;
  --radius-card: 16px;
  --radius-pill: 9999px;
  --shadow-card: 0 2px 4px rgba(0, 0, 0, 0.03);
}

body {
  font-family: var(--font-sans);
  color: var(--color-text-primary);
  background: var(--color-bg-primary);
  margin: 0;
}

[x-cloak] { display: none !important; }

/* Buttons */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-brand); color: var(--color-text-primary);
  border: none; border-radius: var(--radius-pill);
  padding: 10px 24px; font-size: 14px; font-weight: 500;
  font-family: var(--font-sans); cursor: pointer;
  text-decoration: none; transition: opacity 0.15s;
}
.btn-primary:hover { opacity: 0.85; }
.btn-primary:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }

.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-bg-primary); color: var(--color-text-primary);
  border: 1px solid var(--color-border-medium); border-radius: var(--radius-pill);
  padding: 10px 24px; font-size: 14px; font-weight: 500;
  font-family: var(--font-sans); cursor: pointer;
  text-decoration: none; transition: background 0.15s;
}
.btn-secondary:hover { background: var(--color-bg-subtle); }
.btn-secondary:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }

.btn-danger {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-accent-red); color: #fff;
  border: none; border-radius: var(--radius-pill);
  padding: 10px 24px; font-size: 14px; font-weight: 500;
  font-family: var(--font-sans); cursor: pointer; text-decoration: none;
}

.btn-ghost {
  background: none; border: none; color: var(--color-text-tertiary);
  padding: 8px 12px; border-radius: 8px; font-size: 14px;
  font-family: var(--font-sans); cursor: pointer;
}
.btn-ghost:hover { background: var(--color-bg-subtle); color: var(--color-text-primary); }

/* Inputs */
.input-pill {
  display: block; width: 100%; box-sizing: border-box;
  border: 1px solid var(--color-border-medium); border-radius: var(--radius-pill);
  padding: 10px 16px; font-size: 14px; font-family: var(--font-sans);
  background: var(--color-bg-primary); color: var(--color-text-primary);
  transition: border-color 0.15s;
}
.input-pill::placeholder { color: var(--color-text-muted); }
.input-pill:focus { border-color: var(--color-brand); outline: 2px solid var(--color-brand); outline-offset: -1px; }

.select-pill {
  display: block; width: 100%; box-sizing: border-box;
  border: 1px solid var(--color-border-medium); border-radius: var(--radius-pill);
  padding: 10px 16px; font-size: 14px; font-family: var(--font-sans);
  background: var(--color-bg-primary); color: var(--color-text-primary);
  appearance: auto; cursor: pointer;
}
.select-pill:focus { border-color: var(--color-brand); outline: 2px solid var(--color-brand); outline-offset: -1px; }

/* Cards */
.card {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-card);
  padding: 24px;
  box-shadow: var(--shadow-card);
}

/* Badges */
.badge { display: inline-block; padding: 2px 10px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 500; }
.badge-success { background: var(--color-brand-light); color: var(--color-brand-deep); }
.badge-warning { background: rgba(195, 125, 13, 0.1); color: var(--color-accent-amber); }
.badge-error { background: rgba(212, 86, 86, 0.1); color: var(--color-accent-red); }
.badge-info { background: rgba(55, 114, 207, 0.1); color: var(--color-accent-blue); }
.badge-neutral { background: var(--color-bg-subtle); color: var(--color-text-tertiary); }

/* Table */
.table-header { background: var(--color-bg-subtle); }
.table-header th {
  padding: 12px 16px; text-align: left;
  font-size: 12px; text-transform: uppercase;
  letter-spacing: 0.6px; color: var(--color-text-muted); font-weight: 500;
}
.table-row { border-bottom: 1px solid var(--color-border-subtle); }
.table-row:hover { background: var(--color-bg-subtle); }
.table-row td { padding: 12px 16px; font-size: 14px; }

/* Sidebar nav items */
.nav-item {
  display: block; padding: 8px 12px; border-radius: 8px;
  font-size: 14px; color: var(--color-text-tertiary);
  text-decoration: none; transition: background 0.1s;
}
.nav-item:hover { background: var(--color-bg-subtle); color: var(--color-text-primary); }
.nav-item.active {
  background: rgba(24, 226, 153, 0.08);
  color: var(--color-text-primary); font-weight: 500;
}

.nav-group-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--color-text-muted); font-weight: 500;
  padding: 0 12px; margin-bottom: 4px; margin-top: 20px;
}

/* Typography helpers */
.page-title { font-size: 24px; font-weight: 600; letter-spacing: -0.24px; color: var(--color-text-primary); margin: 0; }
.section-title { font-size: 18px; font-weight: 600; letter-spacing: -0.2px; color: var(--color-text-primary); margin: 0; }
.label-upper { font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--color-text-muted); font-weight: 500; }
.font-mono { font-family: var(--font-mono); }
.text-muted { color: var(--color-text-tertiary); }
.text-secondary { color: var(--color-text-secondary); }
.text-brand { color: var(--color-brand); }
.text-brand-deep { color: var(--color-brand-deep); }

/* Banners */
.banner-success { background: var(--color-brand-light); color: var(--color-brand-deep); padding: 12px 16px; border-radius: var(--radius-card); font-size: 14px; }
.banner-warning { background: rgba(195, 125, 13, 0.08); color: var(--color-accent-amber); padding: 12px 16px; border-radius: var(--radius-card); font-size: 14px; }
.banner-error { background: rgba(212, 86, 86, 0.08); color: var(--color-accent-red); padding: 12px 16px; border-radius: var(--radius-card); font-size: 14px; }

/* Centered layout (auth/error pages) */
.layout-centered {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.auth-card {
  width: 100%; max-width: 384px; padding: 32px; box-sizing: border-box;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

/* ===== App shell (sidebar + main) ===== */
.app-sidebar {
  position: fixed; top: 0; left: 0; width: 240px; height: 100vh;
  border-right: 1px solid var(--color-border-subtle);
  background: #fff; display: flex; flex-direction: column; z-index: 40;
}
.app-main {
  margin-left: 240px; padding: 32px 40px; min-height: 100vh;
}
.hamburger { display: none; }
.sidebar-backdrop { display: none; }

/* ===== Responsive utilities ===== */
img, svg, video { max-width: 100%; height: auto; }

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-scroll table { min-width: 600px; }

.grid-responsive-4 {
  display: grid; gap: 16px;
  grid-template-columns: repeat(4, 1fr);
}
.grid-responsive-3 {
  display: grid; gap: 24px;
  grid-template-columns: repeat(3, 1fr);
}

/* ===== Responsive: tablet and below (≤768px) ===== */
@media (max-width: 768px) {
  .app-sidebar {
    transform: translateX(-100%);
    transition: transform 0.2s ease;
  }
  .app-sidebar.is-open {
    transform: translateX(0);
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.15);
  }
  .app-main {
    margin-left: 0;
    padding: 60px 16px 20px;
  }
  .hamburger {
    display: inline-flex; align-items: center; justify-content: center;
    position: fixed; top: 12px; left: 12px; z-index: 50;
    width: 44px; height: 44px;
    border: 1px solid var(--color-border-subtle); background: #fff;
    border-radius: 8px; font-size: 20px; line-height: 1; cursor: pointer;
    color: var(--color-text-primary);
  }
  .hamburger:hover { background: var(--color-bg-subtle); }
  .sidebar-backdrop {
    display: block; position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.4); z-index: 35;
  }

  /* Touch targets */
  .btn-primary, .btn-secondary, .btn-danger,
  .input-pill, .select-pill,
  input[type="text"], input[type="email"], input[type="password"],
  input[type="date"], input[type="number"], select, textarea, button {
    min-height: 44px;
  }
  /* Keep compact buttons compact */
  .btn-ghost, .nav-item { min-height: 0; }

  /* Long monospace content wraps */
  .font-mono { word-break: break-all; overflow-wrap: anywhere; }

  /* Grids collapse */
  .grid-responsive-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-responsive-3 { grid-template-columns: repeat(2, 1fr); }

  /* Hero form stacks */
  .hero-form { flex-direction: column !important; }
  .hero-form input, .hero-form button { width: 100%; }

  /* Date form stacks */
  .date-form {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .date-form > div, .date-form button { width: 100%; }
}

/* Landing nav — hide secondary links only on phones */
@media (max-width: 600px) {
  .landing-nav-link { display: none; }
  .landing-nav-inner { padding: 12px 16px !important; }
  .landing-cta { padding: 6px 14px !important; font-size: 13px; }
}

/* ===== Responsive: phone (≤480px) ===== */
@media (max-width: 480px) {
  .grid-responsive-4 { grid-template-columns: 1fr; }
  .grid-responsive-3 { grid-template-columns: 1fr; }
}