/* EDEN design system — the house shell shared with the logistics app (logisticapp.edenart.com)
 * and EDEN Cashflow: tokens, the rail, the top bar, cards, tables, controls and state pills.
 * Everything specific to the Artist Portal lives in globals.css, not here. */
:root {
  color-scheme: light;
  /* ground and ink */
  --surface-1: #fcfcfb;
  --page: #f9f9f7;
  --rail: #f2f1ea;
  --ink-1: #0b0b0b;
  --ink-2: #52514e;
  --muted: #655e56; /* the design system's --text-muted: 5.6:1 on the rail, 6.4:1 on white (was 3.2:1) */
  --grid: #e1e0d9;
  --baseline: #c3c2b7;
  --border: rgba(11,11,11,.10);
  /* brand */
  --accent: #1f5470;
  --accent-soft: #d3e3ec;
  --brand-gold: #9a7b4f;
  --brand-ink: #191917;
  /* state */
  --good: #0ca30c;
  --good-text: #006300;
  --warning: #fab219;
  --serious: #ec835a;
  --critical: #d03b3b;
  --violet: #4a3aa7;
  --aqua: #1baf7a;
  /* metrics */
  --sidenav-w: 242px;
  --rail-gap: 9px;
  --r-card: 10px;
  --r-ctl: 8px;
  /* the material the rail and the top bar are made of: one definition, worn by both */
  --glass-radius: 22px;
  --glass-bg: linear-gradient(168deg, rgba(255,255,255,.60) 0%, rgba(255,255,255,.14) 22%, rgba(255,255,255,.06) 50%, rgba(238,236,226,.34) 100%);
  --glass-blur: blur(34px) saturate(260%);
  --glass-border: 1px solid rgba(255,255,255,.62);
  --glass-shadow: inset 0 1.5px 0 rgba(255,255,255,1), inset 1.5px 0 0 rgba(255,255,255,.7), inset -1px 0 0 rgba(255,255,255,.42),
    inset 0 26px 44px -26px rgba(255,255,255,.95), inset 0 -26px 44px -30px rgba(11,11,11,.14), 0 28px 60px -20px rgba(11,11,11,.30), 0 3px 12px rgba(11,11,11,.08);
  --rail-cap: #6f6c64;
}

body {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink-1);
  font-size: 14px;
  background:
    radial-gradient(560px 460px at -60px -70px, rgba(154,123,79,.55), transparent 70%),
    radial-gradient(460px 560px at -30px 76%, rgba(31,84,112,.46), transparent 68%),
    radial-gradient(360px 300px at 120px 42%, rgba(74,58,167,.20), transparent 70%),
    var(--page);
  background-attachment: fixed;
}
.num { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- brand mark ---------------------------------------------------------- */
.brand { display: flex; align-items: center; gap: 11px; white-space: nowrap; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 9px; flex: none;
  background: linear-gradient(155deg, #2a2a27, var(--brand-ink));
  color: #f1e5cf; font-weight: 700; font-size: 19px; line-height: 1;
  font-family: Georgia, "Times New Roman", serif; letter-spacing: .5px;
  display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px rgba(241,229,207,.14), inset 0 -6px 10px rgba(0,0,0,.28), 0 1px 2px rgba(0,0,0,.22);
}
.brand-word { display: flex; flex-direction: column; line-height: 1.08; }
.brand-word b { font-weight: 700; font-size: 14.5px; letter-spacing: .2px; color: var(--ink-1); white-space: nowrap; }
.brand-word b em { font-style: normal; font-weight: 800; color: var(--brand-gold); }
.brand-word small { color: var(--muted); font-weight: 400; font-size: 10.5px; letter-spacing: .01em; margin-top: 1px; }

/* --- rail ---------------------------------------------------------------- */
.sidenav {
  position: fixed; top: var(--rail-gap); bottom: var(--rail-gap); left: var(--rail-gap);
  width: calc(var(--sidenav-w) - var(--rail-gap) * 2); z-index: 60;
  display: flex; flex-direction: column; gap: 18px; overflow-y: auto; overflow-x: hidden;
  padding: 14px 12px 18px; border-radius: var(--glass-radius);
  background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: var(--glass-border); box-shadow: var(--glass-shadow);
}
.sn-brand { display: flex; align-items: center; gap: 10px; padding: 2px 4px 10px; margin-bottom: 4px;
  border-bottom: 1px solid rgba(11,11,11,.07); color: inherit; text-decoration: none; }
.sn-brand:hover .brand-word b { text-decoration: underline; text-underline-offset: 3px; }
.sn-group { display: flex; flex-direction: column; gap: 2px; }
.sn-cap { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--rail-cap); padding: 0 10px 4px; }
.sidenav a.sn-item, .sidenav button.sn-item {
  appearance: none; border: none; background: none; color: var(--ink-2);
  padding: 8px 10px; border-radius: 8px; font: inherit; font-weight: 600; font-size: 13.5px; cursor: pointer;
  display: flex; align-items: center; gap: 9px; text-align: start; width: 100%; text-decoration: none;
}
.sidenav .sn-item:hover { background: rgba(255,255,255,.55); color: var(--ink-1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(11,11,11,.05); }
.sidenav .sn-item.on { background: linear-gradient(180deg, rgba(255,255,255,.84), rgba(255,255,255,.60)); color: var(--ink-1);
  box-shadow: inset 3px 0 0 var(--brand-gold), inset 0 1px 0 rgba(255,255,255,.95), 0 1px 3px rgba(11,11,11,.07); }
.sn-ic { font-size: 14px; width: 20px; line-height: 1; text-align: center; flex: none; }
.pn-badge { margin-inline-start: auto; background: var(--critical); color: #fff; border-radius: 10px; padding: 1px 7px; font-size: 12px; font-weight: 700; }
.pn-badge:empty { display: none; }
.sn-soon { margin-inline-start: auto; font-size: 9.5px; letter-spacing: .06em; color: var(--muted); border: 1px solid var(--grid); border-radius: 4px; padding: 1px 5px; }
.sn-foot { margin-top: auto; padding: 10px 10px 0; border-top: 1px solid rgba(11,11,11,.07); font-size: 12px; color: var(--ink-2); line-height: 1.5; }
.sn-foot b { color: var(--ink-1); font-weight: 600; display: block; overflow: hidden; text-overflow: ellipsis; }
.sn-foot .uscope { color: var(--muted); }

/* --- top bar ------------------------------------------------------------- */
/* The impersonation bar and the top bar stick together as one block, so neither hides the other. */
.topstack { position: sticky; top: 0; z-index: 50; }
.topbar {
  display: flex; align-items: center; gap: 16px; padding: 9px 20px;
  margin-inline-start: var(--sidenav-w); margin-inline-end: var(--rail-gap); margin-block: var(--rail-gap) 0;
  border-radius: var(--glass-radius);
  background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: var(--glass-border); box-shadow: var(--glass-shadow);
}
.search { flex: 1; max-width: 520px; position: relative; }
.search input { width: 100%; padding-block: 7px; padding-inline: 12px 34px; border: 1px solid var(--baseline); border-radius: 8px;
  background: var(--page); font-size: 13px; color: var(--ink-1); height: 34px; }
.search input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.search .icon { position: absolute; inset-inline-end: 10px; top: 7px; color: var(--muted); pointer-events: none; }
.datanote { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.datanote .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--good); }
.datanote .dot.off { background: var(--warning); }
.userbox { display: inline-flex; align-items: center; gap: 8px; margin-inline-start: auto; }
.user-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 999px;
  background: rgba(238,241,246,.9); font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.user-chip .uav { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
.user-chip b { font-weight: 600; color: var(--ink-1); }
.user-chip .uscope { color: var(--muted); }

/* --- impersonation bar --------------------------------------------------- */
.impbar { display: flex; align-items: center; gap: 14px; justify-content: space-between;
  flex-wrap: wrap; padding: 9px 18px; margin-inline-start: var(--sidenav-w); background: #3b2f14; color: #f6e7c4;
  font-size: 13px; font-weight: 600; border-radius: 0 0 12px 12px; }
.impbar b { color: #fff; }
.impbar .btn, .impbar .btn-secondary { background: #f6e7c4; color: #3b2f14; border-color: transparent; font-weight: 700; }
.impbar .btn:hover, .impbar .btn-secondary:hover { background: #fff; border-color: transparent; }

/* --- layout -------------------------------------------------------------- */
.wrap { padding: 18px 20px 60px; max-width: 1600px; margin-inline-start: var(--sidenav-w); margin-inline-end: auto; }
.wrap.wide { max-width: none; }

/* --- state pills --------------------------------------------------------- */
.pill { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 3px 10px; font-size: 12px;
  font-weight: 500; border: 1px solid transparent; white-space: nowrap; }
.pill .pd { width: 7px; height: 7px; border-radius: 50%; }
.pill.s-draft { background: #f0efec; color: var(--ink-2); } .pill.s-draft .pd { background: var(--muted); }
.pill.s-submitted { background: #fff7e0; color: #7a5b00; } .pill.s-submitted .pd { background: var(--warning); }
.pill.s-returned { background: #fbe9e9; color: #a12626; } .pill.s-returned .pd { background: var(--critical); }
.pill.s-approved { background: #e7f0fb; color: #1c5cab; } .pill.s-approved .pd { background: var(--accent); }
.pill.s-created { background: #e6f6e6; color: var(--good-text); } .pill.s-created .pd { background: var(--good); }

/* --- narrow screens: the rail becomes a row above the page ---------------- */
@media (max-width: 900px) {
  :root { --sidenav-w: 0px; }
  .sidenav { position: static; width: auto; flex-direction: row; flex-wrap: wrap; gap: 6px 14px; padding: 10px 14px;
    border-radius: 0; border: none; border-bottom: 1px solid var(--grid); background: var(--rail);
    -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
  .sn-brand { flex: 1 1 100%; border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
  .sn-group { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 4px; }
  .sn-cap, .sn-foot { display: none; }
  .sidenav a.sn-item, .sidenav button.sn-item { width: auto; } /* same selector as the width: 100% above, or it loses */
  .sidenav .sn-item.on { box-shadow: none; background: var(--ink-1); color: var(--page); }
  .topbar { margin: 0; border-radius: 0; background: var(--surface-1); border: none; border-bottom: 1px solid var(--grid);
    box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; flex-wrap: wrap; gap: 8px 10px; padding: 8px 10px; }
  .topbar .search { order: 5; flex-basis: 100%; max-width: none; }
  .user-chip .uscope, .datanote { display: none; }
  .user-chip b { max-width: 16ch; overflow: hidden; text-overflow: ellipsis; }
  .impbar { margin: 0; border-radius: 0; }
  .wrap { padding: 12px 12px 48px; }
}