/* shared-v0.3.0.css — jamescodes design system */

/* ── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root {
  /* Colour palette */
  --color-primary:      #1a1a2e;
  --color-primary-dark: #2d2d4e;
  --color-primary-text: #ffffff;
  --color-danger:       #b91c1c;
  --color-danger-dark:  #991b1b;
  --color-surface:      #ffffff;
  --color-bg:           #f4f4f6;
  --color-text:         #1a1a2e;
  --color-muted:        #6b7280;
  --color-subtle:       #9ca3af;
  --color-border:       #d1d5db;
  --color-border-light: #e5e7eb;
  --color-hover-bg:     #f3f4f6;

  /* Semantic colours */
  --color-success-bg:   #dcfce7;
  --color-success-text: #166534;
  --color-warning-bg:   #fef9c3;
  --color-warning-text: #854d0e;
  --color-error-bg:     #fee2e2;
  --color-error-text:   #991b1b;

  /* Typography */
  --font-sans:     system-ui, -apple-system, sans-serif;
  --font-size-sm:  0.875rem;
  --font-size-xs:  0.8rem;
  --font-size-2xs: 0.75rem;

  /* Layout */
  --max-width: 960px;

  /* Radius */
  --radius-sm: 3px;
  --radius:    4px;
  --radius-lg: 8px;

  /* Shadow */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
  --shadow:    0 2px 8px rgba(0,0,0,.12);
  --shadow-md: 0 3px 10px rgba(0,0,0,.14);
}

/* ── Base ───────────────────────────────────────────────────────────────── */
body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--color-bg);
  color: var(--color-text);
}

/* Normalise <button> UA styles so button.btn and a.btn are the same height.
   Firefox adds extra inner padding via ::-moz-focus-inner; Chrome/Safari
   add appearance-related spacing. Setting appearance:none and removing the
   moz inner border brings <button> in line with <a>. */
button {
  font: inherit;
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}
button::-moz-focus-inner { padding: 0; border: 0; }

/* ── Nav ────────────────────────────────────────────────────────────────── */
nav, .nav {
  background: var(--color-primary);
  color: var(--color-primary-text);
  padding: 0.75rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  position: sticky;
  top: 0;
  z-index: 10;
  white-space: nowrap;
}

/* Forms inside nav (e.g. CSRF logout) should be transparent to flex layout */
nav form, .nav form { display: contents; }

nav .brand, .nav .brand {
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--color-primary-text);
  text-decoration: none;
  margin-right: auto;
}

nav .user, .nav .user {
  font-size: var(--font-size-sm);
  color: var(--color-subtle);
}

nav .nav-link, .nav .nav-link {
  font-size: var(--font-size-sm);
  color: var(--color-border);
  text-decoration: none;
}
nav .nav-link:hover, .nav .nav-link:hover { color: var(--color-primary-text); }

/* Nav items container — inline flex row on desktop */
nav .nav-items, .nav .nav-items {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

/* Nav buttons are slightly compact */
nav .btn, .nav .btn { padding: 0.25rem 0.75rem; font-size: var(--font-size-xs); }

/* ── Hamburger button (hidden by default) ──────────────────────────────── */
.nav-hamburger {
  display: none;
  background: none;
  border: none;
  color: var(--color-primary-text);
  cursor: pointer;
  font-size: 1.35rem;
  line-height: 1;
  padding: 0.2rem 0;
}

/* ── Close button inside drawer (hidden by default) ────────────────────── */
.nav-close {
  display: none;
}

/* ── Overflow mode: hamburger visible, items slide off-screen ──────────── */

/* Show hamburger when nav is overflowing */
nav.nav-overflow .nav-hamburger,
.nav.nav-overflow .nav-hamburger {
  display: block;
}

/* Convert nav-items to full-screen drawer, hidden off to the right */
nav.nav-overflow .nav-items,
.nav.nav-overflow .nav-items {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--color-primary);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 1rem 1.5rem 2rem;
  gap: 1.5rem;
  transform: translateX(100%);
  pointer-events: none;
}

/* Slide drawer in/out only when triggered by user interaction, not resize */
nav.nav-overflow.nav-animated .nav-items,
.nav.nav-overflow.nav-animated .nav-items {
  transition: transform 0.22s ease;
}

/* Slide drawer in when open */
nav.nav-overflow.nav-open .nav-items,
.nav.nav-overflow.nav-open .nav-items {
  transform: translateX(0);
  pointer-events: auto;
}

/* Close button: visible and pinned to top-right of drawer */
nav.nav-overflow .nav-close,
.nav.nav-overflow .nav-close {
  display: block;
  align-self: flex-end;
  background: none;
  border: none;
  color: var(--color-primary-text);
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
  padding: 0;
}

/* Larger text for links and user label inside drawer */
nav.nav-overflow .nav-items .nav-link,
nav.nav-overflow .nav-items .user,
.nav.nav-overflow .nav-items .nav-link,
.nav.nav-overflow .nav-items .user {
  font-size: 1rem;
  color: var(--color-primary-text);
}

/* Full-size buttons in drawer (override compact nav .btn sizing) */
nav.nav-overflow .nav-items .btn,
.nav.nav-overflow .nav-items .btn {
  padding: 0.4rem 1rem;
  font-size: var(--font-size-sm);
}

/* Forms must stack in drawer — override display:contents */
nav.nav-overflow .nav-items form,
.nav.nav-overflow .nav-items form {
  display: block;
}

/* ── Main content wrapper ───────────────────────────────────────────────── */
main, .main {
  max-width: var(--max-width);
  margin: 2rem auto;
  padding: 0 1rem;
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-block;
  padding: 0.4rem 1rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-family: var(--font-sans);
  text-decoration: none;
  line-height: 1.4;
  transition: background 0.1s, box-shadow 0.1s;
}
.btn-primary { background: var(--color-primary); color: var(--color-primary-text); }
.btn-primary:hover { background: var(--color-primary-dark); }
.btn-danger  { background: var(--color-danger); color: #fff; }
.btn-danger:hover  { background: var(--color-danger-dark); }
.btn-secondary {
  background: var(--color-hover-bg);
  color: var(--color-text);
  border-color: var(--color-border);
}
.btn-secondary:hover { background: var(--color-border-light); }
.btn:disabled, .btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ── Form card ──────────────────────────────────────────────────────────── */
.form-card {
  max-width: 400px;
  margin: 4rem auto;
  background: var(--color-surface);
  padding: 2rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.form-card h1, .form-card h2 { margin-top: 0; }

/* ── Fields ─────────────────────────────────────────────────────────────── */
.field-wrapper { margin-bottom: 1rem; }

.field-wrapper label {
  display: block;
  margin-bottom: 0.3rem;
  font-weight: 500;
  font-size: 0.9rem;
}

.field-wrapper input[type=text],
.field-wrapper input[type=email],
.field-wrapper input[type=password],
.field-wrapper input[type=url],
.field-wrapper input[type=search],
.field-wrapper textarea {
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 1rem;
  font-family: var(--font-sans);
  background: var(--color-surface);
}
.field-wrapper input:focus,
.field-wrapper textarea:focus {
  outline: none;
  border-color: var(--color-primary);
}
.field-wrapper input[readonly],
.field-wrapper input[disabled] {
  background: var(--color-hover-bg);
  color: var(--color-muted);
}
.field-wrapper textarea { min-height: 12rem; resize: vertical; }

.field-helptext { font-size: var(--font-size-xs); color: var(--color-muted); margin-top: 0.2rem; }
.field-errors   { color: var(--color-danger); font-size: var(--font-size-xs); margin-top: 0.2rem; }

/* ── Alerts ─────────────────────────────────────────────────────────────── */
.alert {
  padding: 0.6rem 0.9rem;
  border-radius: var(--radius);
  margin-bottom: 1rem;
  font-size: 0.9rem;
}
.alert-error, .alert-danger { background: var(--color-error-bg);   color: var(--color-error-text); }
.alert-success              { background: var(--color-success-bg);  color: var(--color-success-text); }
.alert-warning, .alert-info { background: var(--color-warning-bg);  color: var(--color-warning-text); }

/* ── Badges ─────────────────────────────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-2xs);
  margin-left: 0.25rem;
}
.badge-success { background: var(--color-success-bg); color: var(--color-success-text); }
.badge-warning { background: var(--color-warning-bg); color: var(--color-warning-text); }
.badge-neutral { background: var(--color-hover-bg);   color: var(--color-muted); }

/* ── Cards ──────────────────────────────────────────────────────────────── */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1rem;
  margin-bottom: 0.75rem;
  transition: box-shadow 0.15s;
}
.card:hover { box-shadow: var(--shadow-sm); }

/* ── App / product grid ─────────────────────────────────────────────────── */
.app-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.app-card {
  display: block;
  padding: 1.25rem 1rem;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: var(--color-text);
  font-weight: 500;
  text-align: center;
  transition: box-shadow 0.15s;
}
.app-card:hover { box-shadow: var(--shadow-md); }
.app-card .subtitle { font-size: var(--font-size-2xs); color: var(--color-subtle); margin-top: 0.25rem; }