/* ==========================================================
   elo-design.css  –  EloOrders Design System
   Global tokens, layout, topbar, stat cards, toolbar,
   search, filters, legend, table wrapper, buttons.
   Loaded in base.html — applies to ALL pages.
   ========================================================== */

/* ═══════════════════ Design Tokens ═══════════════════ */
:root {
  /* Brand */
  --elo-accent:        #70BF4B;
  --elo-accent-hover:  #5AA538;
  --elo-accent-light:  #ecfdf5;

  /* Semantic colors */
  --elo-green:         #10b981;
  --elo-green-bg:      #ecfdf5;
  --elo-green-border:  #a7f3d0;

  --elo-blue:          #3b82f6;
  --elo-blue-bg:       #eff6ff;
  --elo-blue-border:   #bfdbfe;

  --elo-orange:        #f59e0b;
  --elo-orange-bg:     #fffbeb;
  --elo-orange-border: #fde68a;

  --elo-red:           #ef4444;
  --elo-red-bg:        #fef2f2;
  --elo-red-border:    #fecaca;

  --elo-purple:        #8b5cf6;
  --elo-purple-bg:     #f5f3ff;
  --elo-purple-border: #c4b5fd;

  --elo-grey:          #94a3b8;
  --elo-grey-bg:       #f1f5f9;
  --elo-grey-border:   #cbd5e1;

  /* Typography */
  --elo-text:           #1a1d2e;
  --elo-text-secondary: #6b7194;
  --elo-text-muted:     #9da3c0;

  /* Surfaces & borders */
  --elo-card:         #ffffff;
  --elo-border:       #e2e5f1;
  --elo-border-light: #f0f1f7;

  /* Plan / series colors (calendar dots, progress bars, charts) */
  --elo-plan-1:  #70BF4B;   /* accent */
  --elo-plan-2:  #ec4899;
  --elo-plan-3:  #f97316;
  --elo-plan-4:  #8b5cf6;
  --elo-plan-5:  #06b6d4;
  --elo-plan-6:  #14b8a6;
  --elo-plan-7:  #ef4444;
  --elo-plan-8:  #3b82f6;
  --elo-plan-9:  #84cc16;
  --elo-plan-10: #a855f7;
  --elo-plan-11: #f59e0b;
  --elo-plan-12: #6366f1;

  /* Shape */
  --elo-radius:    12px;
  --elo-radius-sm: 8px;

  /* Elevation */
  --elo-shadow-sm: 0 1px 3px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.02);
}


/* ═══════════════════ Page Layout ═══════════════════ */
.elo-topbar-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.elo-main {
  flex: 1;
  max-width: 1780px;
  width: 100%;
  margin: 0 auto;
  padding: 0 1.25rem 2rem;
}

.elo-main__header {
  padding: .25rem 0 0;
}
.elo-main__header:empty {
  padding: .5rem 0 0;
}

.elo-main__title {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--elo-text);
  letter-spacing: -.01em;
}

.elo-main__content {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-top: .5rem;
}


/* ═══════════════════ Top Bar ═══════════════════ */
.elo-topbar {
  display: flex;
  align-items: center;
  height: 56px;
  padding: 0 1.25rem;
  background: var(--elo-card);
  border-bottom: 1px solid var(--elo-border);
  position: sticky;
  top: 0;
  z-index: 50;
}

.elo-topbar__brand {
  display: flex;
  align-items: center;
  gap: .5rem;
  text-decoration: none;
  flex-shrink: 0;
}

.elo-topbar__logo {
  height: 28px;
  width: auto;
}

.elo-topbar__name {
  font-weight: 700;
  font-size: .95rem;
  color: var(--elo-accent);
  letter-spacing: -.02em;
}

/* ── Center: nav links (absolute-centered) ── */
.elo-topbar__nav {
  display: flex;
  align-items: center;
  gap: .25rem;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.elo-topbar__link {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .85rem;
  font-size: .82rem;
  font-weight: 500;
  color: var(--elo-text-secondary);
  text-decoration: none;
  border-radius: 999px;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.elo-topbar__link:hover {
  background: var(--elo-accent-light);
  color: var(--elo-accent);
}
.elo-topbar__link--active {
  background: var(--elo-accent);
  color: #fff;
  font-weight: 600;
}
.elo-topbar__link--active:hover {
  background: var(--elo-accent);
  color: #fff;
}
.elo-topbar__link i {
  font-size: .78em;
  opacity: .75;
}
.elo-topbar__link--active i {
  opacity: 1;
}

/* ── Right: page title + user menu ── */
.elo-topbar__right {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-left: auto;
}

.elo-topbar__page-title {
  font-size: .8rem;
  font-weight: 600;
  color: var(--elo-text-muted);
  white-space: nowrap;
}

.elo-topbar__user {
  position: relative;
}

.elo-topbar__avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--elo-accent-light);
  color: var(--elo-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
  font-weight: 700;
  cursor: pointer;
  transition: box-shadow .15s;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.elo-topbar__avatar:hover {
  box-shadow: 0 0 0 2px var(--elo-accent);
}

.elo-topbar__dropdown {
  min-width: 200px;
  background: var(--elo-card);
  border: 1px solid var(--elo-border);
  border-radius: var(--elo-radius);
  box-shadow: 0 8px 24px rgba(0,0,0,.1);
  padding: .35rem 0;
  list-style: none;
  margin: 0;
}

.elo-topbar__dropdown-info {
  padding: .6rem 1rem;
  border-bottom: 1px solid var(--elo-border-light);
}

.elo-topbar__dropdown-name {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  color: var(--elo-text);
}

.elo-topbar__dropdown-email {
  display: block;
  font-size: .72rem;
  color: var(--elo-text-muted);
}

.elo-topbar__dropdown-action {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem 1rem;
  font-size: .82rem;
  color: var(--elo-text-secondary);
  text-decoration: none;
  transition: background .1s;
}
.elo-topbar__dropdown-action:hover {
  background: var(--elo-grey-bg);
  color: var(--elo-red);
}

/* Mobile toggle */
.elo-topbar__mobile-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.2rem;
  color: var(--elo-text-secondary);
  cursor: pointer;
  padding: .35rem;
  margin-left: auto;
}

.elo-topbar__mobile-nav {
  display: none;
  flex-direction: column;
  background: var(--elo-card);
  border-bottom: 1px solid var(--elo-border);
  padding: .5rem 1rem;
}
.elo-topbar__mobile-nav.open {
  display: flex;
}

.elo-topbar__mobile-link {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem .5rem;
  font-size: .85rem;
  color: var(--elo-text-secondary);
  text-decoration: none;
  border-radius: var(--elo-radius-sm);
}
.elo-topbar__mobile-link:hover {
  background: var(--elo-grey-bg);
}

@media (max-width: 768px) {
  .elo-topbar__nav { display: none; }
  .elo-topbar__page-title { display: none; }
  .elo-topbar__mobile-toggle { display: block; }
}


/* ═══════════════════ Stat Cards ═══════════════════ */
.elo-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .85rem;
}

.elo-stat-card {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: 1rem 1.15rem;
  background: var(--elo-card);
  border: 1px solid var(--elo-border);
  border-radius: var(--elo-radius);
  box-shadow: var(--elo-shadow-sm);
  transition: box-shadow .15s, transform .15s;
}
.elo-stat-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
  transform: translateY(-1px);
}

.elo-stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  font-size: 1rem;
  flex-shrink: 0;
  /* Default (fallback) */
  background: var(--elo-grey-bg);
  color: var(--elo-text-secondary);
}

/* Named icon themes */
.elo-stat-icon.total    { background: var(--elo-accent-light); color: var(--elo-accent); }
.elo-stat-icon.sent     { background: var(--elo-blue-bg);      color: var(--elo-blue); }
.elo-stat-icon.draft    { background: var(--elo-grey-bg);      color: var(--elo-grey); }
.elo-stat-icon.pending  { background: var(--elo-orange-bg);    color: var(--elo-orange); }
.elo-stat-icon.error    { background: var(--elo-red-bg);       color: var(--elo-red); }
.elo-stat-icon.review   { background: var(--elo-purple-bg);    color: var(--elo-purple); }
.elo-stat-icon.success  { background: var(--elo-green-bg);     color: var(--elo-green); }

.elo-stat-number {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--elo-text);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.elo-stat-label {
  font-size: .72rem;
  font-weight: 500;
  color: var(--elo-text-secondary);
  text-transform: uppercase;
  letter-spacing: .3px;
  line-height: 1.3;
  margin-top: 2px;
}


/* ═══════════════════ Toolbar ═══════════════════ */
.elo-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
}

.elo-toolbar-left,
.elo-toolbar-right {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
}


/* ═══════════════════ Search ═══════════════════ */
.elo-search {
  position: relative;
  display: flex;
  align-items: center;
}

.elo-search .search-icon {
  position: absolute;
  left: 10px;
  color: var(--elo-text-muted);
  font-size: .82rem;
  pointer-events: none;
}

.elo-search input {
  height: 36px;
  padding: 0 .75rem 0 2rem;
  font-size: .82rem;
  border: 1px solid var(--elo-border);
  border-radius: var(--elo-radius-sm);
  background: var(--elo-card);
  color: var(--elo-text);
  outline: none;
  min-width: 220px;
  transition: border-color .15s, box-shadow .15s;
}
.elo-search input::placeholder {
  color: var(--elo-text-muted);
}
.elo-search input:focus {
  border-color: var(--elo-accent);
  box-shadow: 0 0 0 2px rgba(112, 191, 75, .15);
}


/* ═══════════════════ Filter ═══════════════════ */
.elo-filter {
  display: flex;
  align-items: center;
  gap: .4rem;
}

.elo-filter label {
  font-size: .72rem;
  font-weight: 600;
  color: var(--elo-text-secondary);
  text-transform: uppercase;
  letter-spacing: .3px;
  white-space: nowrap;
}

.elo-filter select {
  height: 36px;
  padding: 0 2rem 0 .6rem;
  font-size: .82rem;
  border: 1px solid var(--elo-border);
  border-radius: var(--elo-radius-sm);
  background: var(--elo-card);
  color: var(--elo-text);
  cursor: pointer;
  outline: none;
  -webkit-appearance: menulist;
  appearance: menulist;
}
.elo-filter select:focus {
  border-color: var(--elo-accent);
  box-shadow: 0 0 0 2px rgba(112, 191, 75, .15);
}


/* ═══════════════════ Buttons ═══════════════════ */
.elo-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .85rem;
  font-size: .82rem;
  font-weight: 600;
  border-radius: var(--elo-radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .15s, transform .1s;
  white-space: nowrap;
  line-height: 1.4;
  text-decoration: none;
  font-family: inherit;
  background: var(--elo-accent);
  color: #fff;
  border-color: var(--elo-accent);
}
.elo-btn:hover {
  background: var(--elo-accent-hover);
  border-color: var(--elo-accent-hover);
  box-shadow: 0 2px 8px rgba(112, 191, 75, .25);
}
.elo-btn:active {
  transform: scale(.97);
}
.elo-btn i {
  font-size: .85em;
}

.elo-btn-outline {
  background: transparent;
  color: var(--elo-text-secondary);
  border-color: var(--elo-border);
}
.elo-btn-outline:hover {
  background: var(--elo-grey-bg);
  border-color: #d0d4e0;
  color: var(--elo-text);
  box-shadow: none;
}


/* ═══════════════════ Legend ═══════════════════ */
.elo-legend {
  display: flex;
  align-items: center;
  gap: .85rem;
  flex-wrap: wrap;
  padding: .5rem 0;
}

.elo-legend-item {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .78rem;
  color: var(--elo-text-secondary);
}


/* ═══════════════════ Table Wrap ═══════════════════ */
.elo-table-wrap {
  background: var(--elo-card);
  border: 1px solid var(--elo-border);
  border-radius: var(--elo-radius);
  box-shadow: var(--elo-shadow-sm);
  overflow: hidden;
}

.elo-table-wrap table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.elo-table-wrap thead th {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: var(--elo-text-secondary);
  border-bottom: 2px solid var(--elo-border);
  padding: 10px 12px;
  white-space: nowrap;
  background: var(--elo-card);
}

.elo-table-wrap tbody td {
  padding: 8px 12px;
  font-size: 13px;
  border-bottom: 1px solid var(--elo-border-light);
  vertical-align: middle;
}

.elo-table-wrap tbody tr:last-child td {
  border-bottom: none;
}

.elo-table-wrap tbody tr:hover {
  background: #f8f9fe;
}


/* ═══════════════════ Status Pills ═══════════════════ */
/* Global — used across dashboards, subscriptions, legends */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .12rem .5rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: .68rem;
  white-space: nowrap;
  border: 1px solid var(--elo-border);
  background: var(--elo-grey-bg);
  color: var(--elo-text-secondary);
}
.status-pill::before {
  content: "";
  width: .32rem;
  height: .32rem;
  border-radius: 999px;
  background: currentColor;
  opacity: .7;
}

.status-pill.status-pending,
.status-pill.status-pending_fill {
  color: var(--elo-orange);
  background: var(--elo-orange-bg);
  border-color: var(--elo-orange-border);
}
.status-pill.status-draft {
  color: var(--elo-grey);
  background: var(--elo-grey-bg);
  border-color: var(--elo-grey-border);
}
.status-pill.status-validated,
.status-pill.status-approved {
  color: var(--elo-green);
  background: var(--elo-green-bg);
  border-color: var(--elo-green-border);
}
.status-pill.status-sent,
.status-pill.status-validated_sent {
  color: var(--elo-blue);
  background: var(--elo-blue-bg);
  border-color: var(--elo-blue-border);
}
.status-pill.status-completed {
  color: var(--elo-green);
  background: var(--elo-green-bg);
  border-color: var(--elo-green-border);
}
.status-pill.status-cancelled {
  color: var(--elo-red);
  background: var(--elo-red-bg);
  border-color: var(--elo-red-border);
}
.status-pill.status-error,
.status-pill.status-error_manager_review,
.status-pill.status-error_manager_review_sent {
  color: var(--elo-red);
  background: var(--elo-red-bg);
  border-color: var(--elo-red-border);
}
.status-pill.status-review,
.status-pill.status-manager_review,
.status-pill.status-manager_review_sent,
.status-pill.status-under_review {
  color: var(--elo-purple);
  background: var(--elo-purple-bg);
  border-color: var(--elo-purple-border);
}
.status-pill.status-none,
.status-pill.status-not_subscribed {
  color: var(--elo-text-muted);
  background: transparent;
  border-color: var(--elo-border-light);
}
.status-pill.status-none::before,
.status-pill.status-not_subscribed::before {
  display: none;
}


/* ═══════════════════ Responsive ═══════════════════ */
@media (max-width: 640px) {
  .elo-stats { grid-template-columns: repeat(2, 1fr); }
  .elo-stat-card { padding: .75rem; }
  .elo-stat-icon { width: 36px; height: 36px; font-size: .85rem; }
  .elo-stat-number { font-size: 1.1rem; }
  .elo-toolbar { flex-direction: column; align-items: stretch; }
  .elo-search input { min-width: 0; width: 100%; }
  .elo-main { padding: 0 .75rem 1.5rem; }
}