/* ── New Medley Hub — hub.css ──────────────────────────────────────────────
   Single stylesheet for the entire Hub portal.
   All theme-able values are CSS custom properties in :root.
   Company/user overrides are injected as an inline <style> block by the
   context processor — they shadow these :root defaults without touching
   this file.
   ──────────────────────────────────────────────────────────────────────── */

/* ── Design tokens ──────────────────────────────────────────────────────── */
:root {
  /* Brand */
  --nm-accent:        #7c3aed;   /* violet-600 */
  --nm-accent-hover:  #6d28d9;
  --nm-accent-light:  #ede9fe;
  --nm-accent-fg:     #ffffff;

  /* Surface */
  --nm-bg:            #ffffff;
  --nm-surface:       #f9fafb;
  --nm-surface-2:     #f3f4f6;
  --nm-border:        #e5e7eb;

  /* Text */
  --nm-text:          #111827;
  --nm-text-muted:    #6b7280;
  --nm-text-light:    #9ca3af;

  /* Status */
  --nm-success:       #059669;
  --nm-success-bg:    #d1fae5;
  --nm-warning:       #d97706;
  --nm-warning-bg:    #fef3c7;
  --nm-error:         #dc2626;
  --nm-error-bg:      #fee2e2;
  --nm-info:          #2563eb;
  --nm-info-bg:       #dbeafe;

  /* Layout */
  --nm-radius:        0.5rem;
  --nm-radius-lg:     0.75rem;
  --nm-shadow:        0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --nm-shadow-md:     0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);

  /* Nav */
  --nm-nav-bg:        #ffffff;
  --nm-nav-border:    #e5e7eb;
  --nm-nav-height:    3.5rem;

  /* Footer */
  --nm-footer-bg:     #111827;
  --nm-footer-text:   #9ca3af;

  /* Typography */
  --nm-font:          system-ui, -apple-system, 'Segoe UI', sans-serif;
  --nm-font-mono:     ui-monospace, 'Cascadia Code', 'Fira Mono', monospace;
  --nm-text-sm:       0.875rem;
  --nm-text-base:     1rem;
  --nm-text-lg:       1.125rem;
  --nm-text-xl:       1.25rem;
  --nm-text-2xl:      1.5rem;
  --nm-text-3xl:      1.875rem;
  --nm-text-4xl:      2.25rem;
  --nm-text-5xl:      3rem;
}

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

body {
  margin: 0;
  font-family: var(--nm-font);
  font-size: var(--nm-text-base);
  color: var(--nm-text);
  background: var(--nm-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--nm-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; }

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 0.5em;
  line-height: 1.25;
  font-weight: 700;
}

p { margin: 0 0 1em; }

ul, ol { padding-left: 1.25em; margin: 0 0 1em; }

/* ── Layout helpers ──────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.container-sm  { max-width: 640px;  margin-inline: auto; padding-inline: 1.5rem; }
.container-md  { max-width: 800px;  margin-inline: auto; padding-inline: 1.5rem; }

/* ── Navigation ──────────────────────────────────────────────────────────── */
.nm-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--nm-nav-bg);
  border-bottom: 1px solid var(--nm-nav-border);
  box-shadow: var(--nm-shadow);
}

.nm-nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: var(--nm-nav-height);
}

.nm-brand {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  font-size: var(--nm-text-lg);
  color: var(--nm-text);
  text-decoration: none;
  flex-shrink: 0;
}
.nm-brand:hover { text-decoration: none; }
.nm-brand-icon { color: var(--nm-accent); font-size: 1.1em; }

.nm-nav-links {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0.25rem;
  flex: 1;
}
.nm-nav-links li a {
  padding: 0.4rem 0.75rem;
  border-radius: var(--nm-radius);
  color: var(--nm-text-muted);
  font-size: var(--nm-text-sm);
  font-weight: 500;
  transition: color 0.15s, background 0.15s;
}
.nm-nav-links li a:hover,
.nm-nav-links li a.active {
  color: var(--nm-text);
  background: var(--nm-surface-2);
  text-decoration: none;
}

.nm-nav-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

/* ── Language selector ───────────────────────────────────────────────────── */
.nm-lang-form { display: flex; align-items: center; }
.nm-lang-select {
  border: 1px solid var(--nm-border);
  border-radius: var(--nm-radius);
  padding: 0.25rem 0.5rem;
  font-size: var(--nm-text-sm);
  background: var(--nm-bg);
  color: var(--nm-text-muted);
  cursor: pointer;
}
.nm-lang-select:focus { outline: 2px solid var(--nm-accent); outline-offset: 2px; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.nm-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--nm-radius);
  font-size: var(--nm-text-sm);
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
  background: var(--nm-accent);
  color: var(--nm-accent-fg);
  line-height: 1;
}
.nm-btn:hover {
  background: var(--nm-accent-hover);
  text-decoration: none;
  color: var(--nm-accent-fg);
}

.nm-btn-ghost {
  background: transparent;
  color: var(--nm-text-muted);
  border-color: var(--nm-border);
}
.nm-btn-ghost:hover {
  background: var(--nm-surface-2);
  color: var(--nm-text);
}

.nm-btn-sm { padding: 0.35rem 0.75rem; font-size: 0.8125rem; }
.nm-btn-lg { padding: 0.75rem 1.5rem; font-size: var(--nm-text-base); }
.nm-btn-xl { padding: 1rem 2rem; font-size: var(--nm-text-lg); border-radius: var(--nm-radius-lg); }

.nm-btn-danger {
  background: var(--nm-error);
  color: #fff;
}
.nm-btn-danger:hover { background: #b91c1c; color: #fff; }

.nm-btn-success {
  background: var(--nm-success);
  color: #fff;
}

/* ── Messages / alerts ────────────────────────────────────────────────────── */
.nm-messages { padding: 1rem 0 0; }
.nm-alert {
  padding: 0.75rem 1rem;
  border-radius: var(--nm-radius);
  margin-bottom: 0.5rem;
  font-size: var(--nm-text-sm);
  border: 1px solid transparent;
}
.nm-alert-success  { background: var(--nm-success-bg); color: var(--nm-success); border-color: #a7f3d0; }
.nm-alert-warning  { background: var(--nm-warning-bg); color: var(--nm-warning); border-color: #fde68a; }
.nm-alert-error,
.nm-alert-danger   { background: var(--nm-error-bg);   color: var(--nm-error);   border-color: #fecaca; }
.nm-alert-info     { background: var(--nm-info-bg);    color: var(--nm-info);    border-color: #bfdbfe; }

/* ── Main content ─────────────────────────────────────────────────────────── */
.nm-main { min-height: calc(100vh - var(--nm-nav-height) - 6rem); }

/* ── Footer ───────────────────────────────────────────────────────────────── */
.nm-footer {
  background: var(--nm-footer-bg);
  color: var(--nm-footer-text);
  padding: 2.5rem 0;
  margin-top: 4rem;
}
.nm-footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  justify-content: space-between;
}
.nm-footer-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: #e5e7eb;
}
.nm-version { font-size: 0.75rem; color: var(--nm-footer-text); font-weight: 400; }
.nm-footer-links {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.nm-footer-links a { color: var(--nm-footer-text); font-size: var(--nm-text-sm); }
.nm-footer-links a:hover { color: #e5e7eb; }
.nm-footer-copy { font-size: 0.8125rem; color: var(--nm-footer-text); margin: 0; }

/* ── Hero section ─────────────────────────────────────────────────────────── */
.nm-hero {
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 40%, #4c1d95 100%);
  color: #ffffff;
  padding: 6rem 0 5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.nm-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 60% 50%, rgba(124, 58, 237, 0.3) 0%, transparent 60%);
  pointer-events: none;
}
.nm-hero-content { position: relative; z-index: 1; }
.nm-hero h1 {
  font-size: clamp(2rem, 5vw, var(--nm-text-5xl));
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
}
.nm-hero-tagline {
  font-size: clamp(1rem, 2.5vw, var(--nm-text-xl));
  color: rgba(255,255,255,0.8);
  max-width: 600px;
  margin: 0 auto 2rem;
}
.nm-hero-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.nm-hero-actions .nm-btn-xl { background: #fff; color: var(--nm-accent); font-weight: 700; }
.nm-hero-actions .nm-btn-xl:hover { background: var(--nm-accent-light); }
.nm-hero-actions .nm-btn-outline {
  background: transparent;
  border: 2px solid rgba(255,255,255,0.5);
  color: #fff;
  padding: 0.9rem 1.9rem;
  font-size: var(--nm-text-lg);
  border-radius: var(--nm-radius-lg);
  font-weight: 600;
}
.nm-hero-actions .nm-btn-outline:hover { border-color: #fff; background: rgba(255,255,255,0.1); }

/* ── Section headings ─────────────────────────────────────────────────────── */
.nm-section { padding: 4rem 0; }
.nm-section-alt { background: var(--nm-surface); }
.nm-section-title {
  font-size: var(--nm-text-3xl);
  text-align: center;
  margin-bottom: 0.5rem;
}
.nm-section-subtitle {
  text-align: center;
  color: var(--nm-text-muted);
  font-size: var(--nm-text-lg);
  margin-bottom: 3rem;
  max-width: 600px;
  margin-inline: auto;
  margin-bottom: 3rem;
}

/* ── Feature grid ─────────────────────────────────────────────────────────── */
.nm-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}
.nm-feature-card {
  background: var(--nm-bg);
  border: 1px solid var(--nm-border);
  border-radius: var(--nm-radius-lg);
  padding: 1.75rem;
  box-shadow: var(--nm-shadow);
  transition: box-shadow 0.2s;
}
.nm-feature-card:hover { box-shadow: var(--nm-shadow-md); }
.nm-feature-icon {
  font-size: 2rem;
  margin-bottom: 0.75rem;
  display: block;
}
.nm-feature-card h3 { font-size: var(--nm-text-lg); margin-bottom: 0.5rem; }
.nm-feature-card p { color: var(--nm-text-muted); font-size: var(--nm-text-sm); margin: 0; }

/* ── Pricing cards ─────────────────────────────────────────────────────────── */
.nm-pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  align-items: start;
}
.nm-pricing-card {
  background: var(--nm-bg);
  border: 1px solid var(--nm-border);
  border-radius: var(--nm-radius-lg);
  padding: 2rem;
  box-shadow: var(--nm-shadow);
  position: relative;
}
.nm-pricing-card.featured {
  border-color: var(--nm-accent);
  box-shadow: 0 0 0 2px var(--nm-accent), var(--nm-shadow-md);
}
.nm-pricing-badge {
  position: absolute;
  top: -0.75rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--nm-accent);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.2rem 0.8rem;
  border-radius: 99px;
  white-space: nowrap;
}
.nm-pricing-card h3 { font-size: var(--nm-text-xl); margin-bottom: 0.25rem; }
.nm-pricing-desc { color: var(--nm-text-muted); font-size: var(--nm-text-sm); margin-bottom: 1.5rem; }
.nm-pricing-price { font-size: var(--nm-text-4xl); font-weight: 800; margin-bottom: 0.25rem; line-height: 1; }
.nm-pricing-price span { font-size: var(--nm-text-base); font-weight: 400; color: var(--nm-text-muted); }
.nm-pricing-period { color: var(--nm-text-muted); font-size: var(--nm-text-sm); margin-bottom: 1.5rem; }
.nm-pricing-features { list-style: none; padding: 0; margin: 0 0 1.75rem; }
.nm-pricing-features li {
  padding: 0.4rem 0;
  font-size: var(--nm-text-sm);
  border-bottom: 1px solid var(--nm-border);
}
.nm-pricing-features li:last-child { border-bottom: none; }
.nm-pricing-features li::before { content: "✓  "; color: var(--nm-success); font-weight: 700; }

/* ── News / article cards ──────────────────────────────────────────────────── */
.nm-news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}
.nm-news-card {
  background: var(--nm-bg);
  border: 1px solid var(--nm-border);
  border-radius: var(--nm-radius-lg);
  overflow: hidden;
  box-shadow: var(--nm-shadow);
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s;
}
.nm-news-card:hover { box-shadow: var(--nm-shadow-md); }
.nm-news-card-body { padding: 1.25rem; flex: 1; display: flex; flex-direction: column; }
.nm-news-card-title {
  font-size: var(--nm-text-lg);
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--nm-text);
}
.nm-news-card-date { font-size: 0.8125rem; color: var(--nm-text-muted); margin-bottom: 0.75rem; }
.nm-news-card-excerpt { color: var(--nm-text-muted); font-size: var(--nm-text-sm); flex: 1; }
.nm-news-card-footer { padding: 1rem 1.25rem; border-top: 1px solid var(--nm-border); }

/* ── Downloads table ──────────────────────────────────────────────────────── */
.nm-table-wrap { overflow-x: auto; }
.nm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--nm-text-sm);
}
.nm-table th, .nm-table td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--nm-border);
}
.nm-table th {
  background: var(--nm-surface);
  font-weight: 600;
  color: var(--nm-text-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.nm-table tr:last-child td { border-bottom: none; }
.nm-table tbody tr:hover { background: var(--nm-surface); }

/* ── Cards / panels ───────────────────────────────────────────────────────── */
.nm-card {
  background: var(--nm-bg);
  border: 1px solid var(--nm-border);
  border-radius: var(--nm-radius-lg);
  box-shadow: var(--nm-shadow);
}
.nm-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--nm-border);
}
.nm-card-header h2, .nm-card-header h3 { margin: 0; font-size: var(--nm-text-lg); }
.nm-card-body { padding: 1.5rem; }
.nm-card-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--nm-border);
  background: var(--nm-surface);
  border-radius: 0 0 var(--nm-radius-lg) var(--nm-radius-lg);
}

/* ── Auth forms ───────────────────────────────────────────────────────────── */
.nm-auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--nm-surface);
  padding: 2rem;
}
.nm-auth-box {
  background: var(--nm-bg);
  border: 1px solid var(--nm-border);
  border-radius: var(--nm-radius-lg);
  box-shadow: var(--nm-shadow-md);
  width: 100%;
  max-width: 420px;
  padding: 2.5rem;
}
.nm-auth-logo {
  text-align: center;
  margin-bottom: 2rem;
  font-size: var(--nm-text-xl);
  font-weight: 700;
  color: var(--nm-text);
}
.nm-auth-logo .nm-brand-icon { color: var(--nm-accent); font-size: 2rem; display: block; margin-bottom: 0.25rem; }
.nm-auth-title { font-size: var(--nm-text-2xl); text-align: center; margin-bottom: 0.25rem; }
.nm-auth-sub { text-align: center; color: var(--nm-text-muted); font-size: var(--nm-text-sm); margin-bottom: 2rem; }

/* ── Forms ────────────────────────────────────────────────────────────────── */
.nm-form-group { margin-bottom: 1.25rem; }
.nm-label {
  display: block;
  font-size: var(--nm-text-sm);
  font-weight: 500;
  margin-bottom: 0.4rem;
  color: var(--nm-text);
}
.nm-input,
.nm-select,
.nm-textarea {
  display: block;
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--nm-border);
  border-radius: var(--nm-radius);
  font-size: var(--nm-text-base);
  font-family: inherit;
  background: var(--nm-bg);
  color: var(--nm-text);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.nm-input:focus, .nm-select:focus, .nm-textarea:focus {
  outline: none;
  border-color: var(--nm-accent);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}
.nm-textarea { resize: vertical; min-height: 120px; }
.nm-form-help { font-size: 0.8125rem; color: var(--nm-text-muted); margin-top: 0.3rem; }
.nm-form-error { font-size: 0.8125rem; color: var(--nm-error); margin-top: 0.3rem; }
.nm-form-errors { /* Django field error list */
  list-style: none;
  padding: 0;
  margin: 0.25rem 0 0;
}
.nm-form-errors li { font-size: 0.8125rem; color: var(--nm-error); }
.nm-form-row { display: flex; gap: 1rem; }
.nm-form-row .nm-form-group { flex: 1; }

/* ── Dashboard layout ─────────────────────────────────────────────────────── */
.nm-dash-page { display: flex; gap: 2rem; padding: 2rem 0; }

.nm-sidebar {
  width: 220px;
  flex-shrink: 0;
}
.nm-sidebar-section { margin-bottom: 1.5rem; }
.nm-sidebar-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--nm-text-muted);
  padding: 0 0.75rem;
  margin-bottom: 0.4rem;
}
.nm-sidebar-nav { list-style: none; padding: 0; margin: 0; }
.nm-sidebar-nav li a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--nm-radius);
  color: var(--nm-text-muted);
  font-size: var(--nm-text-sm);
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
}
.nm-sidebar-nav li a:hover,
.nm-sidebar-nav li a.active {
  background: var(--nm-accent-light);
  color: var(--nm-accent);
  text-decoration: none;
}

.nm-dash-main { flex: 1; min-width: 0; }

/* ── Stats row ────────────────────────────────────────────────────────────── */
.nm-stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}
.nm-stat-card {
  background: var(--nm-bg);
  border: 1px solid var(--nm-border);
  border-radius: var(--nm-radius-lg);
  padding: 1.25rem 1.5rem;
  box-shadow: var(--nm-shadow);
}
.nm-stat-label { font-size: var(--nm-text-sm); color: var(--nm-text-muted); margin-bottom: 0.25rem; }
.nm-stat-value { font-size: var(--nm-text-3xl); font-weight: 800; line-height: 1; color: var(--nm-text); }
.nm-stat-sub { font-size: 0.8125rem; color: var(--nm-text-muted); margin-top: 0.25rem; }

/* ── Badge / pill ─────────────────────────────────────────────────────────── */
.nm-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2em 0.6em;
  border-radius: 99px;
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--nm-surface-2);
  color: var(--nm-text-muted);
}
.nm-badge-green  { background: var(--nm-success-bg); color: var(--nm-success); }
.nm-badge-yellow { background: var(--nm-warning-bg); color: var(--nm-warning); }
.nm-badge-red    { background: var(--nm-error-bg);   color: var(--nm-error);   }
.nm-badge-blue   { background: var(--nm-info-bg);    color: var(--nm-info);    }
.nm-badge-purple { background: var(--nm-accent-light); color: var(--nm-accent); }

/* ── Page header ─────────────────────────────────────────────────────────── */
.nm-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  gap: 1rem;
  flex-wrap: wrap;
}
.nm-page-header h1 { font-size: var(--nm-text-2xl); margin: 0; }
.nm-page-title { font-size: var(--nm-text-2xl); font-weight: 700; margin-bottom: 1.5rem; }

/* ── Token / code display ─────────────────────────────────────────────────── */
.nm-token-box {
  background: var(--nm-surface-2);
  border: 1px solid var(--nm-border);
  border-radius: var(--nm-radius);
  padding: 0.75rem 1rem;
  font-family: var(--nm-font-mono);
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  word-break: break-all;
}

/* ── Danger zone ─────────────────────────────────────────────────────────── */
.nm-danger-zone {
  border: 1px solid var(--nm-error);
  border-radius: var(--nm-radius-lg);
  padding: 1.5rem;
  margin-top: 2rem;
}
.nm-danger-zone h3 { color: var(--nm-error); margin-bottom: 0.5rem; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .nm-nav-links { display: none; }
  .nm-dash-page { flex-direction: column; }
  .nm-sidebar { width: 100%; }
  .nm-hero { padding: 3rem 0; }
  .nm-footer-inner { flex-direction: column; text-align: center; }
}