/*
 * Reworc Portal v27 — shared chrome
 * Tokens · base type · top bar · side nav · sticky crumb · standard button · beta sitemap pill
 *
 * Every mockup links this stylesheet and keeps only PAGE-SPECIFIC CSS inline.
 * Change a token here → all pages update.
 *
 * Per-page override:
 *   <style> :root { --max-content: 1280px; } </style>
 *   Default is 1280; set per mockup if its content max-width differs (1080, 1140, 1200, 1320, 1400).
 */

/* ============ TOKENS ============ */
:root {
  /* brand */
  --color-brand-logo: #FF183F;

  /* neutral palette */
  --color-palette-neutral-0: #FFFFFF;
  --color-palette-neutral-50: #F7F8FA;
  --color-palette-neutral-100: #EFF1F5;
  --color-palette-neutral-200: #E2E5EC;
  --color-palette-neutral-300: #CBD0DA;
  --color-palette-neutral-400: #9099AC;
  --color-palette-neutral-500: #6B7384;
  --color-palette-neutral-600: #4A5160;
  --color-palette-neutral-700: #343A47;
  --color-palette-neutral-800: #1F2330;
  --color-palette-neutral-900: #14171F;
  --color-palette-ink-700: #1A1F2E;
  --color-palette-ink-800: #0F1117;

  /* accent palettes */
  --color-palette-blue-50:  #E8F1FD;
  --color-palette-blue-200: #B5D4F4;
  --color-palette-blue-400: #3D7CE6;
  --color-palette-blue-500: #2864C8;
  --color-palette-blue-600: #1F4FB3;
  --color-palette-blue-700: #184285;
  --color-palette-green-50:  #EAF7EF;
  --color-palette-green-200: #9CE0B8;
  --color-palette-green-500: #1F9D55;
  --color-palette-green-700: #106B3A;
  --color-palette-amber-50:  #FFF6E5;
  --color-palette-amber-200: #FFD98A;
  --color-palette-amber-500: #B8740F;
  --color-palette-amber-700: #7A4A05;
  --color-palette-red-50:  #FDECEC;
  --color-palette-red-100: #FAD7D7;
  --color-palette-red-200: #F4A8A8;
  --color-palette-red-500: #B8002A;
  --color-palette-red-700: #7A0019;

  /* semantic surfaces */
  --color-surface-default: var(--color-palette-neutral-0);
  --color-surface-muted:   var(--color-palette-neutral-50);
  --color-surface-subtle:  var(--color-palette-neutral-100);

  /* semantic borders */
  --color-border-subtle:  var(--color-palette-neutral-100);
  --color-border-default: var(--color-palette-neutral-200);
  --color-border-focus:   var(--color-palette-blue-400);

  /* semantic text */
  --color-text-default:   var(--color-palette-neutral-900);
  --color-text-muted:     var(--color-palette-neutral-600);
  --color-text-subtle:    var(--color-palette-neutral-500);
  --color-text-on-action: var(--color-palette-neutral-0);
  --color-text-link:      var(--color-palette-blue-600);

  /* action surfaces */
  --color-action-primary-bg:       var(--color-palette-ink-700);
  --color-action-primary-bg-hover: var(--color-palette-ink-800);

  /* selected nav */
  --color-selected-bg:     var(--color-palette-blue-50);
  --color-selected-fg:     var(--color-palette-blue-700);
  --color-selected-border: var(--color-palette-blue-400);

  /* spacing */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px;

  /* radius */
  --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px;
  --radius-xl: 12px; --radius-2xl: 16px;

  /* elevation */
  --elevation-1: 0 1px 2px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.06);
  --elevation-2: 0 2px 4px rgba(0,0,0,0.05), 0 4px 12px rgba(0,0,0,0.08);
  --elevation-3: 0 4px 8px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.1);

  /* type */
  --type-family-ui:         "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --type-family-editorial:  "Source Serif 4", Georgia, "Times New Roman", serif;

  /* chrome */
  --top-bar-h:   56px;
  --side-nav-w:  220px;

  /* per-page override: max-width of the centered content area */
  --max-content: 1280px;
}

/* ============ BASE ============ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--type-family-ui);
  font-size: 15px; line-height: 1.55;
  color: var(--color-text-default);
  /* body background is set per-page so individual mockups can pick muted vs default */
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; cursor: pointer; }
.tnum { font-variant-numeric: tabular-nums; }
a { color: var(--color-text-link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ============ TOP BAR (sticky) ============ */
.top-bar {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--top-bar-h);
  background: var(--color-surface-default);
  border-bottom: 1px solid var(--color-border-subtle);
  display: flex; align-items: center;
  padding: 0 var(--space-5);
  gap: var(--space-5);
  z-index: 300;
}
.top-bar .logo { display: inline-flex; align-items: center; height: 24px; }
.top-bar .logo img { height: 100%; width: auto; display: block; }

/* wordmark variant (text logo) */
.top-bar .wordmark {
  font-family: var(--type-family-ui);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--color-brand-logo);
  text-decoration: none;
}

.top-bar .workspace-switcher {
  display: flex; align-items: center; gap: var(--space-2);
  padding: 6px var(--space-3);
  border-radius: var(--radius-md);
  color: var(--color-text-default);
  font-size: 14px; font-weight: 500;
  background: none; border: none;
}
.top-bar .workspace-switcher:hover { background: var(--color-surface-muted); }

.top-bar .search {
  flex: 1; max-width: 480px; margin: 0 auto;
  display: flex; align-items: center; gap: var(--space-2);
  padding: 8px var(--space-3);
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  color: var(--color-text-subtle);
  font-size: 14px;
}
.top-bar .search .shortcut {
  margin-left: auto;
  padding: 2px 7px;
  background: var(--color-surface-default);
  border: 1px solid var(--color-border-default);
  border-radius: 4px;
  font-size: 12px;
  color: var(--color-text-muted);
}

.top-bar .icon-btn {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  background: none; border: none;
  color: var(--color-text-muted);
}
.top-bar .icon-btn:hover {
  background: var(--color-surface-muted);
  color: var(--color-text-default);
}

.top-bar .avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--color-palette-ink-700);
  color: var(--color-text-on-action);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600;
}

.top-bar .lang-tag {
  padding: 2px 6px;
  background: var(--color-palette-blue-50);
  color: var(--color-palette-blue-700);
  border-radius: var(--radius-sm);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.06em;
}

/* ============ BETA SITEMAP BUTTON ============ */
.beta-sitemap-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px;
  background: var(--color-palette-neutral-100);
  color: var(--color-text-muted);
  border-radius: 9999px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  border: 1px dashed var(--color-palette-neutral-300);
  text-decoration: none;
}
.beta-sitemap-btn svg { width: 12px; height: 12px; }
.beta-sitemap-btn:hover {
  background: var(--color-palette-blue-50);
  color: var(--color-palette-blue-700);
  border-color: var(--color-palette-blue-400);
  text-decoration: none;
}

/* ============ SIDE NAV ============ */
.side-nav {
  position: fixed; top: var(--top-bar-h); bottom: 0; left: 0;
  width: var(--side-nav-w);
  background: var(--color-surface-default);
  border-right: 1px solid var(--color-border-subtle);
  padding: var(--space-5) var(--space-2) var(--space-4);
  overflow-y: auto;
}
.side-nav .group { margin-bottom: var(--space-5); }
.side-nav .group-label {
  padding: 0 var(--space-3) var(--space-2);
  font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
  color: var(--color-text-subtle); text-transform: uppercase;
}
.side-nav .item {
  display: flex; align-items: center; gap: var(--space-2);
  padding: 8px var(--space-3);
  border-radius: var(--radius-md);
  color: var(--color-text-default);
  font-size: 14px; font-weight: 500;
  text-decoration: none;
  margin-bottom: 1px;
  position: relative;
}
.side-nav .item:hover {
  background: var(--color-surface-muted);
  text-decoration: none;
}
.side-nav .item.active {
  background: var(--color-selected-bg);
  color: var(--color-selected-fg);
}
.side-nav .item.active::before {
  content: '';
  position: absolute; left: 0;
  width: 2px; height: 16px;
  background: var(--color-selected-border);
  border-radius: 2px;
}
.side-nav .item svg { width: 16px; height: 16px; flex-shrink: 0; }
.side-nav .item.settings {
  color: var(--color-text-muted);
  margin-top: var(--space-3);
}
.side-nav .item .new-badge {
  margin-left: auto;
  padding: 1px 6px;
  background: var(--color-palette-amber-50);
  color: var(--color-palette-amber-700);
  border-radius: 9999px;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
}

/* ============ PAGE SHELL ============ */
.page {
  margin-left: var(--side-nav-w);
  padding-top: var(--top-bar-h);
  min-height: 100vh;
}

/* ============ STICKY CRUMB ROW ============ */
.crumb-row {
  position: sticky;
  top: var(--top-bar-h);
  z-index: 200;
  background: var(--color-surface-default);
  border-bottom: 1px solid var(--color-border-subtle);
  padding: 12px max(var(--space-10), calc(50% - var(--max-content) / 2 + var(--space-10)));
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
}
.crumb {
  display: flex; align-items: center; gap: var(--space-2);
  color: var(--color-text-muted);
  font-size: 14px;
}
.crumb a { color: var(--color-text-muted); text-decoration: none; }
.crumb a:hover { color: var(--color-text-default); text-decoration: underline; text-underline-offset: 3px; }
.crumb svg { width: 12px; height: 12px; color: var(--color-text-subtle); }

.page-actions { display: flex; gap: var(--space-2); align-items: center; }

/* ============ STANDARD BUTTON ============ */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 8px var(--space-3);
  border-radius: var(--radius-md);
  font-size: 14px; font-weight: 500;
  text-decoration: none;
  border: 1px solid var(--color-border-default);
  background: var(--color-surface-default);
  color: var(--color-text-default);
  cursor: pointer;
}
.btn:hover { background: var(--color-surface-muted); text-decoration: none; }
.btn svg { width: 14px; height: 14px; }
.btn.primary {
  background: var(--color-action-primary-bg);
  color: var(--color-text-on-action);
  border-color: var(--color-action-primary-bg);
}
.btn.primary:hover { background: var(--color-action-primary-bg-hover); }