/* FRAZIER × Sentaris Workspace — brand lockup + chrome utilities
   Used by BrandLockup / FrazierLogo / SentarisLogo in logo.jsx.
   B5: palet hitam/putih/silver dicabut — aksen merek sekarang hijau limau #A3FF4D. */

.fsw-wordmark {
  display: block;
  width: auto;
  user-select: none;
  -webkit-user-drag: none;
}

/* Lockup: horizontal by default — FRAZIER  ×  SENTARIS on one line */
.fsw-lockup {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  font-family: 'Jost', system-ui, sans-serif;
  line-height: 1;
  vertical-align: middle;
  text-decoration: none;
}
.fsw-lockup-line {
  display: inline-flex;
  align-items: center;
  gap: .45em;
}

/* The thin "×" glyph — always silver, thin weight */
.fsw-lockup-x {
  font-family: 'Jost', system-ui, sans-serif;
  font-weight: 300;
  color: #A3FF4D;
  letter-spacing: .04em;
  line-height: 1;
  transform: translateY(-.04em);
}
.fsw-lockup.is-dark .fsw-lockup-x { color: #3F9C1B; }

/* Tagline: silver tracking-wide caps */
.fsw-lockup-tag {
  font-family: 'Jost', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  line-height: 1;
  color: #8B949E;            /* .is-light = white wordmark on a dark background */
  white-space: nowrap;
}
.fsw-lockup.is-dark .fsw-lockup-tag { color: #626C66; }   /* .is-dark = black wordmark on a light background */

/* Stacked variant: FRAZIER on line 1, "× SENTARIS" on line 2, tagline on line 3 */
.fsw-lockup.is-stacked {
  flex-direction: column;
  align-items: flex-start;
  gap: .35em;
}
.fsw-lockup.is-stacked .fsw-lockup-tag { margin-top: .2em; }

/* Size modifiers — wordmark heights (frazier / sentaris) */
.fsw-lockup-sm { font-size: 14px; }
.fsw-lockup-sm .fsw-wordmark-frazier  { height: 18px; }
.fsw-lockup-sm .fsw-wordmark-sentaris { height: 11px; }
.fsw-lockup-sm .fsw-lockup-tag        { font-size: 9px; }

.fsw-lockup-md { font-size: 20px; }
.fsw-lockup-md .fsw-wordmark-frazier  { height: 26px; }
.fsw-lockup-md .fsw-wordmark-sentaris { height: 16px; }

.fsw-lockup-lg { font-size: 30px; }
.fsw-lockup-lg .fsw-wordmark-frazier  { height: 40px; }
.fsw-lockup-lg .fsw-wordmark-sentaris { height: 24px; }
.fsw-lockup-lg .fsw-lockup-tag        { font-size: 11px; letter-spacing: .26em; }

/* Chrome text utility — silver gradient fill on any text */
.fsw-chrome-text {
  background: var(--xcs-chrome, linear-gradient(135deg, #F7F7F7 0%, #C9C9C9 30%, #8F8F8F 55%, #E9E9E9 100%));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Reduce flash of unstyled image while wordmarks load */
.fsw-wordmark:not([src]) { visibility: hidden; }

/* ── Brand polish (loaded after styles.css/ops-theme.css, so these win) ── */
/* Monochrome avatars: per-user colours stored in the DB stay, the UI renders them in greyscale. */
.xcs-avatar, .xcs-mvp-av { filter: grayscale(1) contrast(1.05); }
/* .fsw-avatar dulu ikut di-grayscale, tapi itu meratakan seluruh palet ke ~#909090
   sementara inisialnya tetap putih 800 di ~10px — 3,2:1, gagal di kedua tema.
   Dicat solid ink/card sebagai gantinya. !important karena ops-ui.jsx menaruh
   background warna di inline style; :not() menjaga varian is-empty/is-sys. */
.fsw-avatar:not(.is-empty):not(.is-sys) { background: var(--fsw-ink) !important; color: var(--fsw-card) !important; }
/* Sidebar group labels must stay readable on the black rail in every theme. */
.xcs-sidebar .xcs-section-title { color: rgba(255,255,255,.5) !important; font-family: 'Jost', system-ui, sans-serif; font-size: 10.5px !important; font-weight: 600 !important; letter-spacing: .18em !important; line-height: 1.4 !important; text-transform: uppercase; }   /* a legacy rule (styles.css ~13221) sets 22px/800/dark ink on this class */
/* Sidebar brand block spacing */
.xcs-sidebar .xcs-brand { padding: 6px 6px 14px; }
.xcs-sidebar .xcs-logo .fsw-lockup-tag { margin-top: 6px; }
/* Chrome primary nav item must survive legacy dark-mode overrides (styles.css ~17454/18158). */
html[data-theme="dark"] .xcs-sidebar .xcs-nav-item.is-ops-primary,
[data-theme="dark"] .xcs-sidebar .xcs-nav-item.is-ops-primary { background: var(--xcs-chrome) !important; color: #0A0A0A !important; border: 0 !important; box-shadow: none !important; }
html[data-theme="dark"] .xcs-sidebar .xcs-nav-item.is-ops-primary svg,
[data-theme="dark"] .xcs-sidebar .xcs-nav-item.is-ops-primary svg { color: #0A0A0A !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .xcs-sidebar .xcs-nav-item.is-ops-primary { background: var(--xcs-chrome) !important; color: #0A0A0A !important; border: 0 !important; }
}
/* Active (white) beats chrome when the primary item is the current screen. */
.xcs-sidebar .xcs-nav-item.is-ops-primary.is-active,
html[data-theme="dark"] .xcs-sidebar .xcs-nav-item.is-ops-primary.is-active { background: #FFFFFF !important; color: #0A0A0A !important; }
.xcs-sidebar .xcs-nav-item.is-ops-primary { color: #0A0A0A; }
.xcs-sidebar .xcs-nav-item.is-ops-primary svg { color: #0A0A0A; }


/* ── Aksen Sentaris di sidebar ───────────────────────────────────────
   Sidebar selalu gelap, jadi cyan penuh (#36DEFC) aman di sini: 12,3:1 di
   atas #0A0A0A. Menu aktif tetap berlatar putih seperti sebelumnya, cuma
   diberi penanda cyan di tepi kiri supaya posisi Anda langsung kelihatan
   tanpa menambah warna ke seluruh menu. */
.xcs-sidebar .xcs-nav-item { position: relative; }
.xcs-sidebar .xcs-nav-item.is-active::after {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 60%; border-radius: 0 3px 3px 0;
  background: #36DEFC;
}
/* Badge angka di menu aktif ikut aksen, bukan abu pucat. */
.xcs-sidebar .xcs-nav-item.is-active .xcs-pill:not(.is-red):not(.is-amber) {
  background: rgba(54, 222, 252, .18); color: #0E5F6E; border-color: rgba(54, 222, 252, .45);
}