/* Portal kit — ShowHelm app shell (sidebar + topbar + content)
 * Mirrors /Portal/assets/css/nav.css + portal.css from the upstream repo.
 * Compact rail sidebar + slim secondary topbar. Dark theme by default.
 */
@import url('../../colors_and_type.css');

* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--font-body); background: var(--bg-body); color: var(--text-body); }

a { color: inherit; text-decoration: none; }

:root {
  --shell-sidebar-w:           240px;
  --shell-sidebar-w-collapsed: 64px;
  --shell-topbar-h:            56px;
  --shell-row-h:               36px;
  --shell-section-gap:         18px;
  --shell-radius-sm:           6px;
  --shell-radius-md:           8px;
  --shell-radius-lg:           12px;
  --shell-motion-fast:         120ms;
  --shell-motion-base:         200ms;
  --shell-easing:              cubic-bezier(0.4, 0, 0.2, 1);
}

/* ───────── Outer grid ───────── */
.app-shell {
  display: grid;
  grid-template-columns: var(--shell-sidebar-w) 1fr;
  grid-template-rows: var(--shell-topbar-h) 1fr;
  grid-template-areas:
    "sidebar topbar"
    "sidebar content";
  min-height: 100dvh;
  background: var(--bg-body);
  transition: grid-template-columns var(--shell-motion-base) var(--shell-easing);
}
.app-shell[data-sidebar-collapsed="1"] {
  grid-template-columns: var(--shell-sidebar-w-collapsed) 1fr;
}

/* ───────── Sidebar ─────────
 * The sidebar (.app-sidebar / #app-sidebar + every .sidebar__* rule) is
 * owned entirely by nav.css — the canonical app-shell stylesheet. The
 * stale mirror that used to live here drifted from nav.css and fought it
 * on specificity (e.g. `.sidebar__search input` beating `.sidebar__search-input`),
 * so it was removed during the design reconstruction. Do not re-add
 * sidebar rules here; edit nav.css. */

/* ───────── Topbar ───────── */
.app-topbar {
  grid-area: topbar;
  position: sticky; top: 0;
  z-index: 50;
  height: var(--shell-topbar-h);
  background: color-mix(in srgb, var(--bg-card) 88%, transparent);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--border-light);
  display: flex; align-items: center;
  gap: 12px; padding: 0 16px;
}
.topbar__title-wrap { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 0 1 auto; }
.topbar__title {
  font: 600 15px/1 var(--font-display);
  color: var(--text-strong); margin: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar__breadcrumbs {
  display: flex; align-items: center; gap: 6px;
  color: var(--text-dim);
  font: 500 12px/1 var(--font-body);
  flex-shrink: 0;
}
.topbar__breadcrumbs a:hover { color: var(--brand-accent); }
.topbar__breadcrumbs .sep { color: var(--text-dim); opacity: .6; }

.topbar__center {
  flex: 1 1 480px; max-width: 520px;
  margin: 0 24px;
  display: flex; justify-content: center; align-items: center;
  min-width: 0;
}
@media (max-width: 1240px) { .topbar__search-kbd { display: none; } }
@media (max-width: 1100px) { .topbar__center { margin: 0 16px; flex: 1 1 240px; } }
@media (max-width: 960px)  { .topbar__breadcrumbs { display: none; } }
@media (max-width: 820px)  { .topbar__center { display: none; } }
@media (max-width: 720px)  { .topbar__right .sh-segmented { display: none; } }
.topbar__search { width: 100%; position: relative; }
.topbar__search input {
  width: 100%; height: 34px;
  background: var(--bg-input);
  border: 1px solid var(--border-light);
  border-radius: var(--shell-radius-sm);
  color: var(--text-primary);
  padding: 0 36px 0 32px;
  font: 500 13.5px/1 var(--font-body);
}
.topbar__search input::placeholder { color: var(--text-dim); }
.topbar__search input:focus { outline: none; border-color: var(--brand-secondary); box-shadow: 0 0 0 2px rgba(122,154,187,.2); }
.topbar__search-icon {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--text-dim); pointer-events: none;
}
.topbar__search-kbd {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: var(--bg-elevated); color: var(--text-soft);
  font: 600 11px/1 var(--font-mono);
  padding: 2px 6px; border-radius: 4px;
  border: 1px solid var(--border-light); pointer-events: none;
}

.topbar__right { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.topbar__right > theme-toggle { margin: 0 2px; }
.topbar__right .sh-segmented { margin-right: 8px; }

.sh-segmented {
  display: inline-flex; align-items: center;
  padding: 3px; gap: 2px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: 8px;
}
.sh-segmented__btn {
  height: 26px; padding: 0 10px; border: 0; cursor: pointer;
  background: transparent; color: var(--text-soft);
  font: 600 12px/1 var(--font-display);
  border-radius: 6px;
  transition: background var(--shell-motion-fast) var(--shell-easing),
              color var(--shell-motion-fast) var(--shell-easing);
}
.sh-segmented__btn:hover { color: var(--text-primary); }
.sh-segmented__btn.is-active {
  background: var(--bg-card); color: var(--text-strong);
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.topbar__iconbtn {
  background: transparent; border: 0;
  color: var(--text-soft);
  height: 36px; width: 36px;
  border-radius: var(--shell-radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; position: relative;
  transition: background var(--shell-motion-fast) var(--shell-easing),
              color var(--shell-motion-fast) var(--shell-easing);
}
.topbar__iconbtn:hover { background: var(--bg-hover); color: var(--text-primary); }
.topbar__iconbtn-dot {
  position: absolute; top: 8px; right: 8px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--danger);
  border: 2px solid var(--bg-card);
}
.topbar__avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--brand-primary); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 11px/1 var(--font-display);
  border: 1px solid var(--border-light);
  cursor: pointer;
}

/* ───────── Content area ───────── */
.app-content {
  grid-area: content;
  min-width: 0;
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
  padding: 28px 32px;
}
@media (max-width: 1100px) { .app-content { padding: 24px 20px; } }
.app-content.with-rightpane {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 24px;
  gap: 24px;
}
@media (max-width: 1180px) {
  .app-content.with-rightpane { grid-template-columns: 1fr; }
}

/* ───────── Page header ───────── */
.page-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 24px; margin-bottom: 24px; flex-wrap: wrap;
}
.page-head > :first-child { min-width: 0; flex: 1 1 auto; }
.page-head__title {
  font: 700 1.55rem/1.2 var(--font-display);
  letter-spacing: -.018em; color: var(--text-strong); margin: 0;
}
.page-head__sub { color: var(--text-soft); font-size: 14px; line-height: 1.45; margin: 6px 0 0; }
.page-head__actions { display: inline-flex; gap: 8px; align-items: center; flex-shrink: 0; }

/* ───────── Card ───────── */
.sh-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--shell-radius-lg);
  box-shadow: var(--shadow-card);
}
.sh-card__head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; padding: 14px 18px;
  border-bottom: 1px solid var(--border-light);
}
.sh-card__head h3 { margin: 0; font: 600 1.02rem/1.2 var(--font-display); color: var(--text-strong); }
.sh-card__body { padding: 18px; }

/* ───────── Stat grid ───────── */
.sh-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
@media (max-width: 980px) { .sh-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .sh-stat-grid { grid-template-columns: minmax(0, 1fr); } }
.sh-stat {
  position: relative; overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--shell-radius-lg);
  padding: 14px 16px;
  transition: transform var(--shell-motion-fast) var(--shell-easing),
              border-color var(--shell-motion-fast) var(--shell-easing),
              box-shadow var(--shell-motion-fast) var(--shell-easing);
}
.sh-stat::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(closest-side at 100% 0%, color-mix(in srgb, var(--brand-primary) 22%, transparent), transparent 60%);
  opacity: 0; transition: opacity var(--shell-motion-fast) var(--shell-easing);
}
.sh-stat:hover { transform: translateY(-2px); border-color: var(--brand-secondary); box-shadow: var(--shadow-card-lg); }
.sh-stat:hover::before { opacity: 1; }
.sh-stat__label { font: 600 11px/1 var(--font-display); text-transform: uppercase; letter-spacing: .08em; color: var(--text-soft); }
.sh-stat__num   { font: 700 1.75rem/1.1 var(--font-display); letter-spacing: -.02em; color: var(--text-strong); font-variant-numeric: tabular-nums; margin-top: 6px; }
.sh-stat__delta { font: 600 12px/1 var(--font-mono); margin-top: 6px; display: inline-flex; gap: 4px; font-variant-numeric: tabular-nums; }
.sh-stat__delta--up   { color: var(--success-ink); }
.sh-stat__delta--down { color: var(--danger-ink); }

/* ───────── Buttons ───────── */
.sh-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 14px;
  font: 600 13px/1 var(--font-body);
  border-radius: var(--shell-radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--shell-motion-fast) var(--shell-easing),
              background var(--shell-motion-fast) var(--shell-easing),
              border-color var(--shell-motion-fast) var(--shell-easing),
              color var(--shell-motion-fast) var(--shell-easing);
}
.sh-btn:active { transform: translateY(0.5px); }
.sh-btn--primary { background: var(--brand-secondary); color: #fff; }
.sh-btn--primary:hover { background: color-mix(in srgb, var(--brand-secondary) 86%, #fff 14%); }
.sh-btn--accent  { background: #e85d3a; color: #fff; }
.sh-btn--accent:hover { background: #cf4a2a; }
.sh-btn--outline { background: transparent; color: var(--text-strong); border-color: var(--border); }
.sh-btn--outline:hover { border-color: var(--brand-secondary); background: rgba(122,154,187,.08); }
.sh-btn--ghost   { background: transparent; color: var(--text-soft); }
.sh-btn--ghost:hover { background: var(--bg-hover); color: var(--text-primary); }
.sh-btn--sm { height: 28px; padding: 0 10px; font-size: 12px; border-radius: 6px; }

/* ───────── Pipeline (kanban) ───────── */
.sh-kanban { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 1100px) { .sh-kanban { grid-template-columns: repeat(2, 1fr); } }
.sh-kanban__col {
  background: var(--bg-soft);
  border: 1px solid var(--border-light);
  border-radius: var(--shell-radius-lg);
  padding: 12px;
  min-height: 360px;
}
.sh-kanban__col-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 6px;
}
.sh-kanban__col-head h4 {
  margin: 0; font: 700 10px/1 var(--font-display);
  text-transform: uppercase; letter-spacing: .10em; color: var(--text-soft);
}
.sh-kanban__col-head b { font: 700 12px/1 var(--font-mono); color: var(--text-strong); font-variant-numeric: tabular-nums; }
.sh-kanban__col-sum {
  font: 600 11px/1 var(--font-mono); color: var(--text-dim);
  font-variant-numeric: tabular-nums; margin: 0 0 10px;
}

.sh-deal {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 12px 12px 10px;
  margin-bottom: 8px;
  cursor: grab;
  transition: transform var(--shell-motion-fast) var(--shell-easing),
              border-color var(--shell-motion-fast) var(--shell-easing),
              box-shadow var(--shell-motion-fast) var(--shell-easing);
}
.sh-deal:hover { transform: translateY(-1px); border-color: var(--brand-secondary); box-shadow: var(--shadow-card-lg); }
.sh-deal__row { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.sh-deal__name { font: 700 13px/1.25 var(--font-display); color: var(--text-strong); }
.sh-deal__sub  { font: 500 11px/1.3 var(--font-body); color: var(--text-soft); margin-top: 2px; }
.sh-deal__amt  { font: 700 13px/1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--text-strong); letter-spacing: -.005em; }
.sh-deal__meta { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border-light); }
.sh-deal__date { font: 500 11px/1 var(--font-mono); color: var(--text-soft); font-variant-numeric: tabular-nums; }
.sh-avatars { display: inline-flex; }
.sh-avatar {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--brand-secondary); color: #fff;
  font: 700 9px/20px var(--font-display);
  text-align: center; border: 2px solid var(--bg-card);
  margin-left: -6px;
}
.sh-avatar:first-child { margin-left: 0; }
.sh-avatar--c2 { background: #e85d3a; }
.sh-avatar--c3 { background: #b0c4d8; color: #1c2c3a; }
.sh-avatar--c4 { background: #ffc107; color: #1c2c3a; }

/* ───────── Badges ───────── */
.sh-badge {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 9px; border-radius: 999px;
  font: 600 11px/1 var(--font-display);
}
.sh-badge .dot { width: 5px; height: 5px; border-radius: 50%; }
.sh-badge--success { background: var(--success-soft); color: var(--success-ink); }
.sh-badge--success .dot { background: var(--success); }
.sh-badge--warn    { background: var(--warning-soft); color: var(--warning-ink); }
.sh-badge--warn .dot { background: var(--warning); }
.sh-badge--danger  { background: var(--danger-soft); color: var(--danger-ink); }
.sh-badge--danger .dot { background: var(--danger); }
.sh-badge--info    { background: var(--info-soft); color: var(--info-ink); }
.sh-badge--info .dot { background: var(--brand-secondary); }
.sh-stage {
  display: inline-flex; align-items: center; height: 20px; padding: 0 8px;
  border-radius: 6px; font: 700 10px/1 var(--font-display);
  text-transform: uppercase; letter-spacing: .08em;
}
.sh-stage--lead      { background: var(--info-soft);    color: var(--info-ink); }
.sh-stage--quoted    { background: var(--warning-soft); color: var(--warning-ink); }
.sh-stage--confirmed { background: var(--success-soft); color: var(--success-ink); }
.sh-stage--won       { background: var(--success-soft); color: var(--success-ink); }

/* ───────── Show card (worker home) ───────── */
.sh-show-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-left: 4px solid var(--brand-secondary);
  border-radius: var(--shell-radius-lg);
  padding: 14px 16px;
  margin-bottom: 10px;
}
.sh-show-card--confirmed { border-left-color: var(--success); }
.sh-show-card--pending   { border-left-color: var(--warning); }
.sh-show-card--declined  { border-left-color: var(--danger); opacity: .72; }
.sh-show-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.sh-show-card__name { font: 700 16px/1.2 var(--font-display); color: var(--text-strong); }
.sh-show-card__meta { font: 500 12px/1.4 var(--font-body); color: var(--text-soft); margin-top: 4px; }
.sh-show-card__when { font: 600 12px/1 var(--font-mono); color: var(--brand-secondary); font-variant-numeric: tabular-nums; }
.sh-show-card__foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border-light); }

/* ───────── Unsubmitted-paysheet pill ───────── */
.sh-pill-warn {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--warning-soft); color: var(--warning-ink);
  border: 1px solid var(--warning);
  border-left: 4px solid var(--warning);
  border-radius: var(--shell-radius-lg);
  padding: 14px 16px; margin-bottom: 14px;
}
.sh-pill-warn b { font-size: 13px; font-weight: 700; }
.sh-pill-warn small { font-size: 12px; opacity: .85; }
.sh-pill-warn .sh-btn { margin-left: auto; }

/* ───────── Activity feed (right pane) ───────── */
.sh-rightpane { border-left: 1px solid var(--border-light); padding-left: 16px; }
.sh-rightpane h4 {
  font: 700 11px/1 var(--font-display); text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-soft); margin: 0 0 10px;
}
.sh-activity { display: flex; flex-direction: column; gap: 8px; }
.sh-activity__item {
  display: grid; grid-template-columns: 24px 1fr; gap: 10px;
  padding: 10px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--shell-radius-md);
}
.sh-activity__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand-secondary);
  margin: 6px 0 0 8px;
}
.sh-activity__dot--success { background: var(--success); }
.sh-activity__dot--warn    { background: var(--warning); }
.sh-activity__title { font: 600 12.5px/1.35 var(--font-display); color: var(--text-strong); }
.sh-activity__meta  { font: 500 11px/1.4 var(--font-mono); color: var(--text-dim); font-variant-numeric: tabular-nums; margin-top: 2px; }