/* ============================================================
   MEL — refinements layer
   Structural polish on top of the token theme. Loaded AFTER the
   framework files. Everything here benefits every Mel app.
   ============================================================ */

/* ---------- BASE ---------- */
html { color-scheme: only light; }

/* Gentle screen-enter transition (replays on SPA re-render) */
@keyframes mel-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.app-main-inner { animation: mel-fade-in 0.28s cubic-bezier(.16,1,.3,1) both; }
@media (prefers-reduced-motion: reduce) { .app-main-inner { animation: none; } }
body {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  color: var(--text-main);
  letter-spacing: -0.003em;
}

h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]),
.title, .card-title, .hero-title, .stat-value {
  font-family: var(--font-sans);
  letter-spacing: -0.018em;
}
h1:not([class]) { font-weight: var(--font-weight-bold); }

/* ---------- LINKS & PRIMARY-AS-TEXT ----------
   Honey reads poorly as small text on white, so text contexts use
   the darker honey-700 (--color-primary-text); fills keep honey-500. */
a:not([class]),
.text-primary,
.link-primary,
.breadcrumbs a,
.search-result-title,
.menu-item.is-danger:hover { /* keep danger */ }
a:not([class]) { color: var(--color-primary-text); font-weight: var(--font-weight-semibold); }
a:not([class]):hover { color: var(--honey-600); }
.text-primary { color: var(--color-primary-text); }
.link-primary { color: var(--color-primary-text); }
.link-primary:hover { color: var(--honey-600); }
.breadcrumbs a { color: var(--color-primary-text); }
.navbar-item.is-active { color: var(--color-primary-text); }
.menu-item.is-active { color: var(--color-primary-text); }
.tab-input:checked ~ .tab-labels .tab-label { color: var(--color-primary-text); }
.list-group-item.is-selected { color: var(--color-primary-text); }

/* ---------- BUTTONS (modern, flat) ---------- */
.btn, button:not([class]) { letter-spacing: -0.005em; font-weight: var(--font-weight-bold); }

/* Neutral default gets a hairline for definition; subtle lift on hover */
.btn { border: 1px solid var(--slate-200); }
.btn-primary, .btn-secondary, .btn-danger, .btn-ghost { border-color: transparent; }
.btn:hover:not(:disabled),
button:not([class]):hover:not(:disabled),
input[type="submit"]:not([class]):hover:not(:disabled),
input[type="button"]:not([class]):hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn-ghost:hover:not(:disabled) { box-shadow: none; }
.btn:active:not(:disabled),
button:not([class]):active:not(:disabled),
input[type="submit"]:not([class]):active:not(:disabled) { transform: translateY(0) scale(0.99); box-shadow: none; }

/* Consistent icon sizing inside buttons */
.btn svg, button:not([class]) svg { width: 1.05em; height: 1.05em; flex-shrink: 0; }
.btn-icon svg { width: 1.25em; height: 1.25em; }

.btn-primary,
button[type="submit"]:not([class]),
input[type="submit"]:not([class]) {
  background-color: var(--honey-600);   /* deepened so white text stays legible */
  background-image: none;
  color: #ffffff;
  box-shadow: none;
}
.btn-primary:hover:not(:disabled),
button[type="submit"]:not([class]):hover:not(:disabled),
input[type="submit"]:not([class]):hover:not(:disabled) {
  background-color: var(--honey-700);
  background-image: none;
  color: #ffffff;
}
.btn-secondary { background-image: none; }

/* Solid-fill components that previously used white text on honey */
.badge-primary { color: var(--color-primary-fg); }
.pagination-item.is-active { color: var(--color-primary-fg); }
.list-group-item.is-active { color: var(--color-primary-fg); }
.step.is-active::before { color: var(--color-primary-fg); }
.message-primary .message-header,
.message .message-header { color: var(--color-primary-fg); }

/* ---------- INPUTS ---------- */
.input, .select, .textarea,
input:not([class]), select:not([class]), textarea:not([class]) {
  border-width: 1.5px;
  padding: 0.6rem 0.85rem;
  background-color: var(--input-bg);
  box-shadow: var(--shadow-xs);
  transition: border-color var(--transition-base), box-shadow var(--transition-base), background-color var(--transition-base);
}
.textarea, textarea:not([class]) { padding: 0.7rem 0.85rem; }
.input:focus, .select:focus, .textarea:focus,
input:not([class]):focus, select:not([class]):focus, textarea:not([class]):focus {
  border-color: var(--color-primary);
  box-shadow: var(--input-ring-focus);
}
.label, label:not([class]) { color: var(--slate-600); font-weight: var(--font-weight-semibold); }

/* ---------- CARDS ---------- */
.card { box-shadow: var(--shadow-sm); border-radius: var(--radius-lg); }
.card-body { padding: var(--spacing-lg); }
.card-header {
  padding: var(--spacing-md) var(--spacing-lg);
  background-color: transparent;
  border-bottom: 1px solid var(--card-border);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  color: var(--text-main);
}
.card-footer { padding: var(--spacing-md) var(--spacing-lg); }

/* ---------- TABLES ---------- */
.table th, table:not([class]) th {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--slate-500);
  font-weight: var(--font-weight-bold);
}
.table td, table:not([class]) td { padding: 0.85rem 1rem; }
.table-hover tbody tr:hover, table:not([class]) tbody tr:hover {
  background-color: var(--table-row-hover);
}

/* ---------- STAT CARDS ---------- */
.stat-card, .stat-horizontal {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.stat-icon { border-radius: var(--radius-md); width: 2.75rem; height: 2.75rem; }
.stat-value { letter-spacing: -0.03em; }

/* ---------- BADGES / STATUS PILLS ----------
   Soft tinted pills for record status. Reusable across apps. */
.badge, .tag { border-radius: var(--radius-pill); font-weight: var(--font-weight-bold); }
.badge-soft {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.2rem 0.7rem;
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  line-height: 1.4;
}
.badge-soft::before {
  content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%;
  background: currentColor; flex-shrink: 0;
}
.badge-soft.is-plain::before { display: none; }
.badge-soft-success { background: color-mix(in srgb, var(--color-success), white 86%); color: color-mix(in srgb, var(--color-success), black 14%); }
.badge-soft-warning { background: var(--honey-50); color: var(--honey-800); }
.badge-soft-error   { background: color-mix(in srgb, var(--color-error), white 86%); color: color-mix(in srgb, var(--color-error), black 12%); }
.badge-soft-info    { background: color-mix(in srgb, var(--color-info), white 88%); color: color-mix(in srgb, var(--color-info), black 16%); }
.badge-soft-neutral { background: var(--slate-100); color: var(--slate-600); }

/* ---------- ALERTS ---------- */
.alert { border-radius: var(--radius-md); border-width: 1px; }
.alert > svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }

/* ============================================================
   MEL APP SHELL — sidebar rail + topbar + content
   ============================================================ */
.app-shell { display: flex; min-height: 100vh; background: var(--bg-base); }

.mel-rail {
  width: 76px;
  flex-shrink: 0;
  background: var(--bg-surface);
  border-right: 1px solid var(--slate-200);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.75rem 0 var(--spacing-md);
  gap: 0.35rem;
  position: sticky;
  top: 0;
  height: 100vh;
  align-self: flex-start;
}
.mel-rail .mel-rail-logo {
  /* desktop: brand already lives in the topbar — menu starts at the top */
  display: none;
}
.mel-rail a {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--radius-md);
  color: var(--slate-400);
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.mel-rail a svg { width: 21px; height: 21px; }
.mel-rail a:hover { background: var(--slate-100); color: var(--slate-700); }
.mel-rail a.is-active {
  background: color-mix(in srgb, var(--color-primary), transparent 86%);
  color: var(--honey-700);
}
.mel-rail .mel-rail-spacer { flex: 1; }

/* labels + section header: hidden on the desktop icon-rail, shown in mobile drawer */
.mel-rail-label { display: none; }
.mel-rail-section { display: none; }

/* Dark rail variant */
.mel-rail.is-dark {
  background: var(--slate-900);
  border-right-color: var(--slate-800);
}
.mel-rail.is-dark a { color: var(--slate-400); }
.mel-rail.is-dark a:hover { background: rgba(255,255,255,0.06); color: #fff; }
.mel-rail.is-dark a.is-active {
  background: color-mix(in srgb, var(--color-primary), transparent 78%);
  color: var(--honey-300);
}

.app-content { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app-topbar {
  height: 68px; flex-shrink: 0;
  display: flex; align-items: center; gap: var(--spacing-md);
  padding: 0 var(--spacing-lg);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--slate-200);
}
.app-main { flex: 1; padding: var(--spacing-lg); }
.app-main-inner { max-width: 1180px; margin: 0 auto; }

/* Page heading block */
.page-head { margin-bottom: var(--spacing-lg); }
.page-head h1 { font-size: var(--text-3xl); margin-bottom: 0.15rem; }
.page-head .page-sub { color: var(--text-muted); }

/* Section label */
.section-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: var(--font-weight-bold);
  color: var(--slate-400);
  margin-bottom: var(--spacing-sm);
}

/* Filter bar */
.filter-bar {
  background: var(--bg-surface);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--spacing-lg);
}

/* ---------- LOGO (official wordmark) ---------- */
.mel-logo { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; }
.mel-logo .mel-mark { color: var(--honey-500); display: grid; place-items: center; }
.mel-logo .mel-mark svg { width: 30px; height: 30px; display: block; }
.mel-logo .mel-wordmark { height: 26px; width: auto; display: block; }

/* ---------- KPI link ---------- */
.kpi-link {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary-text);
}

/* ---------- soft focus on icon links ---------- */
.mel-rail a:focus-visible { outline: var(--outline-focus); outline-offset: 2px; }

/* ---------- MOBILE: off-canvas rail + responsive topbar ---------- */
.mel-burger { display: none; }
.mel-rail-backdrop { display: none; }

@media (max-width: 820px) {
  .mel-rail {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 60;
    transform: translateX(-100%);
    transition: transform var(--transition-base);
    box-shadow: var(--shadow-lg);
  }
  .mel-rail { transform: translateX(-100%); }
  .app-shell.rail-open .mel-rail { transform: translateX(0) !important; }

  /* expand the rail into a proper labeled drawer */
  .mel-rail {
    width: 270px;
    align-items: stretch;
    padding: var(--spacing-md) var(--spacing-sm) var(--spacing-lg);
    gap: 2px;
  }
  .mel-rail .mel-rail-logo {
    width: auto; height: auto;
    justify-content: flex-start;
    place-items: center start;
    display: flex; align-items: center; gap: 8px;
    padding: 4px 12px;
    margin-bottom: var(--spacing-sm);
  }
  .mel-rail a {
    display: flex; align-items: center;
    width: auto; height: 46px;
    justify-content: flex-start;
    gap: 14px;
    padding: 0 14px;
    border-radius: var(--radius-md);
    color: var(--slate-600);
  }
  .mel-rail a svg { flex-shrink: 0; }
  .mel-rail a.is-active { color: var(--honey-700); }
  .mel-rail.is-dark a { color: #cdd6df; }
  .mel-rail-label { display: inline; font-weight: 700; font-size: 15px; white-space: nowrap; }
  .mel-rail-logo .mel-wordmark { height: 24px; }
  .mel-rail-section {
    display: block;
    font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em;
    font-weight: 800; color: var(--slate-400);
    padding: 10px 14px 6px;
  }
  .mel-rail.is-dark .mel-rail-section { color: var(--slate-500); }
  .mel-rail-backdrop {
    display: block;
    position: fixed; inset: 0; z-index: 55;
    background: color-mix(in srgb, var(--slate-900), transparent 45%);
    opacity: 0; pointer-events: none;
    transition: opacity var(--transition-base);
  }
  .app-shell.rail-open .mel-rail-backdrop { opacity: 1 !important; pointer-events: auto; }
  .mel-burger { display: inline-grid; }
  .app-topbar { height: 60px; padding: 0 var(--spacing-md); gap: var(--spacing-sm); }
  .hide-mobile { display: none !important; }
  .app-main { padding: var(--spacing-md); }
  .page-head h1, .page-head .page-sub { word-break: break-word; }
}