/* Cloudjet look for Bootstrap applications (Finance, HR), taken from the Supplies portal.
 *
 * Supplies is the reference implementation, so these values are measured from it rather than
 * invented: Manrope, #141414 text, #E2E2E2 hairlines, 10–12px radii, a #F3DC3E primary button
 * with dark text, a grey page behind white cards, and soft-tinted status pills.
 *
 * Load LAST, after the template's own stylesheets. Semantic red stays for validation errors and
 * destructive actions. Chart colours are drawn to canvas and have to be set in chart options.
 */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap");

:root {
  /* Measured from the Supplies portal; see ../SCHEMA.md. */
  --cj-ink: #141414;
  --cj-muted: #73736B;
  --cj-faint: #9a9a92;
  --cj-accent: #F3DC3E;
  --cj-accent-deep: #e0c92c;
  --cj-gold-text: #746500;
  --cj-page: #f3f4f6;
  --cj-card: #ffffff;
  --cj-line: #E2E2E2;
  --cj-line-soft: #e6e6df;
  --cj-th-bg: #f5f5f0;
  --cj-rail: #141414;
  --cj-rail-accent: #1f1f1f;
  --cj-radius: 12px;
  --cj-radius-sm: 8px;

  /* Status pills: fill and tone, never the brand yellow. */
  --cj-ok: #6e11b0;   --cj-ok-wash: #f3e8ff;
  --cj-warn: #894b00; --cj-warn-wash: #fef9c2;
  --cj-risk: #9f0712; --cj-risk-wash: #ffe2e2;
  --cj-info: #9f2d00; --cj-info-wash: #ffedd4;

  --bs-body-font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --bs-body-color: var(--cj-ink);
  --bs-body-bg: var(--cj-page);
  --bs-border-color: var(--cj-line);
  --bs-border-radius: var(--cj-radius-sm);
  --bs-primary: var(--cj-accent); --bs-primary-rgb: 243,220,62;
  --bs-link-color: var(--cj-ink); --bs-link-hover-color: #000;
  --primary-color: var(--cj-ink); --primary-rgb: 20,20,20;
}

body, .app-content, .main-content, .content { font-family: var(--bs-body-font-family); color: var(--cj-ink); background: var(--cj-page); font-size: 14px; }
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 { font-family: var(--bs-body-font-family); font-weight: 600; color: var(--cj-ink); letter-spacing: -.1px; }
/* Page titles carry the brand in the olive Supplies uses; the line under them stays plain. */
.page-title, .content-header h1, .breadcrumb-header h1, h1.page-title, .main-content > h1:first-of-type { color: var(--cj-gold-text); font-size: 20px; font-weight: 600; }

/* Cards: hairline, 12px radius, no shadow, 16–24px padding. */
.card { background: var(--cj-card); border: 1px solid var(--cj-line); border-radius: var(--cj-radius); box-shadow: none; }
.card-header { background: transparent; border-bottom: 1px solid var(--cj-line); padding: 16px 20px; font-weight: 600; font-size: 15px; }
.card-body { padding: 20px; }
.card-footer { background: transparent; border-top: 1px solid var(--cj-line); padding: 14px 20px; }
/* The template's coloured left stripes on tiles are decoration; the number is the message. */
.card[class*="border-start"], .card[class*="border-top"], .card[class*="border-bottom"], .card[class*="border-end"] {
  border-color: var(--cj-line) !important; border-width: 1px !important;
}

/* Tables: bold dark headers on a warm grey, hairlines between rows, roomy cells. */
.table { --bs-table-bg: transparent; color: var(--cj-ink); border-color: var(--cj-line-soft); margin-bottom: 0; }
/* DataTables raises the header to 0.85rem, so the size is pinned rather than inherited. */
.table > thead th, .table thead th, table.dataTable thead th, table.dataTable thead td {
  background: var(--cj-th-bg) !important; color: var(--cj-ink) !important;
  border-bottom: 1px solid var(--cj-line-soft);
  font-size: 12px !important; font-weight: 700; text-transform: none; letter-spacing: normal;
  padding: 12px 14px; white-space: nowrap;
}
.table > tbody > tr > td, table.dataTable tbody td { color: var(--cj-ink); }
.table > tbody > tr > td { padding: 12px 14px; border-color: var(--cj-line-soft); vertical-align: middle; font-size: 14px; }
.table > tbody > tr:hover > td { background: #fafaf7; }

/* Templates often put bg-primary/bg-danger/text-white on a thead or its row. Those utilities are
 * !important, so with the light header they paint white text onto a light background. Every
 * header cell is normalised to the one treatment instead. */
.table thead.text-white th, .table thead tr.text-white th, .table thead th.text-white,
.table thead.bg-primary th, .table thead.bg-danger th, .table thead.bg-dark th,
.table thead tr.bg-primary th, .table thead tr.bg-danger th,
thead.bg-primary th, thead.bg-danger th, thead.bg-dark th {
  background: var(--cj-th-bg) !important; color: var(--cj-ink) !important;
}
.table thead.bg-primary, .table thead.bg-danger, .table thead.bg-dark,
.table thead tr.bg-primary, .table thead tr.bg-danger,
thead.bg-primary, thead.bg-danger, thead.bg-dark {
  background: var(--cj-th-bg) !important; color: var(--cj-ink) !important;
}
.table-bordered, .table-bordered > :not(caption) > * > * { border-left: 0; border-right: 0; }

/* Forms */
.form-label, label.form-label, .col-form-label { font-size: 13px; font-weight: 600; color: var(--cj-ink); margin-bottom: 6px; }
.form-control, .form-select, .input-group-text, textarea.form-control, .select2-selection {
  border: 1px solid var(--cj-line); border-radius: var(--cj-radius-sm);
  padding: 9px 12px; min-height: 40px; font-size: 14px; color: var(--cj-ink); background: var(--cj-card);
}
.form-control:focus, .form-select:focus, textarea.form-control:focus {
  border-color: var(--cj-accent); box-shadow: 0 0 0 3px rgba(243,220,62,.45); outline: none;
}
.form-control::placeholder { color: var(--cj-faint); }
.form-control:disabled, .form-control[readonly] { background: #f6f6f3; color: var(--cj-muted); }
.input-group-text { background: #f6f6f3; color: var(--cj-muted); }
.form-text { color: var(--cj-muted); font-size: 12px; }
.form-control.is-invalid, .was-validated .form-control:invalid { border-color: var(--cj-risk); }
.invalid-feedback { color: var(--cj-risk); }

/* Buttons: yellow primary with dark text, exactly as Supplies does it. */
.btn { border-radius: var(--cj-radius-sm); font-weight: 500; padding: 9px 14px; font-size: 14px; }
.btn-primary, .btn-primary:focus { background: var(--cj-accent); border-color: var(--cj-accent); color: var(--cj-ink); }
.btn-primary:hover { background: var(--cj-accent-deep); border-color: var(--cj-accent-deep); color: var(--cj-ink); }
.btn-secondary, .btn-light, .btn-outline-secondary { background: var(--cj-card); border-color: var(--cj-line); color: var(--cj-ink); }
.btn-secondary:hover, .btn-light:hover, .btn-outline-secondary:hover { background: #f6f6f3; border-color: var(--cj-line); color: var(--cj-ink); }
.btn-outline-primary { border-color: var(--cj-accent); color: var(--cj-ink); }
.btn-outline-primary:hover { background: var(--cj-accent); color: var(--cj-ink); }
.btn-dark { background: var(--cj-ink); border-color: var(--cj-ink); color: #fff; }
.btn-success { background: var(--cj-ok); border-color: var(--cj-ok); }
.btn-danger { background: var(--cj-risk); border-color: var(--cj-risk); color: #fff; }
.btn-warning { background: var(--cj-accent); border-color: var(--cj-accent); color: var(--cj-ink); }
.btn-sm { padding: 6px 10px; font-size: 13px; }

/* Status: soft tint behind a strong tone, 8px radius, never the raw brand yellow. */
.badge { font-weight: 500; border-radius: var(--cj-radius-sm); padding: 3px 9px; font-size: 12px; }
.badge.bg-primary { background: var(--cj-warn-wash) !important; color: var(--cj-warn) !important; }
.badge.bg-success, .badge.bg-soft-success { background: var(--cj-ok-wash) !important; color: var(--cj-ok) !important; }
.badge.bg-warning, .badge.bg-soft-warning { background: var(--cj-warn-wash) !important; color: var(--cj-warn) !important; }
.badge.bg-danger,  .badge.bg-soft-danger  { background: var(--cj-risk-wash) !important; color: var(--cj-risk) !important; }
.badge.bg-info,    .badge.bg-soft-info    { background: var(--cj-info-wash) !important; color: var(--cj-info) !important; }
.badge.bg-secondary, .badge.bg-light, .badge.bg-dark { background: #ecece8 !important; color: var(--cj-muted) !important; }

/* Alerts */
.alert { border: 1px solid transparent; border-radius: var(--cj-radius-sm); padding: 13px 15px; }
.alert-success { background: var(--cj-ok-wash); border-color: #cfe8da; color: var(--cj-ok); }
.alert-warning { background: var(--cj-warn-wash); border-color: #f0e2b5; color: var(--cj-warn); }
.alert-danger  { background: var(--cj-risk-wash); border-color: #f0cfcf; color: var(--cj-risk); }
.alert-info    { background: var(--cj-info-wash); border-color: #ded3f4; color: var(--cj-info); }

/* Navigation: #141414 rail with quiet group labels, one active item. */
.app-sidebar, .main-sidebar, .sidebar { background: var(--cj-ink) !important; border-right: 0 !important; }
.app-sidebar .side-menu__item, .sidebar .nav-link { color: #fff !important; border-radius: var(--cj-radius-sm); margin: 2px 8px; padding: 8px; min-height: 48px; font-size: 14px; font-weight: 400; gap: 8px; }
.app-sidebar .side-menu__item:hover, .sidebar .nav-link:hover { background: var(--cj-rail-accent) !important; color: #fff !important; }
.app-sidebar .side-menu__item.active, .app-sidebar .side-menu__item[aria-current="page"], .sidebar .nav-link.active { background: var(--cj-rail-accent) !important; color: var(--cj-accent) !important; }
.app-sidebar .side-menu__item i, .app-sidebar .side-menu__icon, .sidebar .nav-link i { margin-right: 10px; font-size: 16px; opacity: .85; }
.slide__category, .side-menu__label-category { color: #8a8b84 !important; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; padding: 14px 22px 6px; }
.app-header, .main-header, .navbar { background: var(--cj-card) !important; border-bottom: 1px solid var(--cj-line) !important; box-shadow: none !important; }

/* Breadcrumb, modal, dropdown, tabs, pagination */
.breadcrumb { font-size: 13px; }
.breadcrumb-item, .breadcrumb-item a { color: var(--cj-muted); }
.breadcrumb-item.active { color: var(--cj-ink); font-weight: 600; }
.modal-content { border: 0; border-radius: var(--cj-radius); box-shadow: 0 24px 60px rgba(20,20,20,.16); }
.modal-header { background: var(--cj-ink); color: #fff; border-bottom: 0; border-radius: var(--cj-radius) var(--cj-radius) 0 0; padding: 16px 20px; }
.modal-header .btn-close { filter: invert(1); }
.modal-body { padding: 20px; }
.modal-footer { border-top: 1px solid var(--cj-line); padding: 14px 20px; }
.dropdown-menu { border: 1px solid var(--cj-line); border-radius: var(--cj-radius-sm); box-shadow: 0 8px 24px rgba(20,20,20,.08); padding: 6px; }
.dropdown-item { border-radius: 6px; padding: 8px 12px; font-size: 14px; }
.dropdown-item:hover { background: #f6f6f3; }
.nav-tabs { border-bottom: 1px solid var(--cj-line); }
.nav-tabs .nav-link { border: 0; color: var(--cj-muted); font-weight: 600; padding: 10px 14px; }
.nav-tabs .nav-link.active { color: var(--cj-ink); border-bottom: 2px solid var(--cj-accent); background: transparent; }
/* Segmented toggles (Debtors/Creditors, Bulletin/Appointments) follow the same rule. */
.nav-pills .nav-link.active, .btn-check:checked + .btn, .btn-check:checked + .btn-outline-primary {
  background: var(--cj-accent) !important; border-color: var(--cj-accent) !important; color: var(--cj-ink) !important;
}
.page-link { color: var(--cj-ink); border-color: var(--cj-line); }
.page-item.active .page-link { background: var(--cj-accent); border-color: var(--cj-accent); color: var(--cj-ink); }

/* Top bar -----------------------------------------------------------------
 * Shaped after the Supplies header: 64px, transparent over the page grey, a single hairline, a
 * quiet hamburger, plain text controls on the right, and the notification count in brand yellow.
 * The template laid this out as a block, so items sat at four different heights.
 */
.app-header {
  /* Layout is left to the template: it pins the sidebar under the header, so changing the
   * header's height or position leaves a gap above the rail or detaches the logo block.
   * Only the surface is restyled here. */
  display: flex !important; align-items: center !important;
  background: var(--cj-card) !important;
  border-bottom: 1px solid var(--cj-line) !important; border-width: 0 0 1px 0 !important;
  box-shadow: none !important;
}
/* The rail runs the full height and paints over the bar's left edge (it sits above it), so the
 * bar's contents start after it. The width follows the rail's collapsed state. */
.app-sidebar { top: 0 !important; height: 100vh !important; }
.app-header .main-header-container { display: flex; align-items: center; width: 100%; padding-left: 240px; transition: padding-left .2s; }
body.sidebar-collapsed .app-header .main-header-container { padding-left: 80px; }
.app-header .header-content-left, .app-header .header-content-right { display: flex !important; align-items: center !important; }
.app-header .header-element { display: flex !important; align-items: center !important; }
.app-header .header-element + .header-element { margin-left: 4px; }
.app-header h6 { margin: 0; }

/* Brand in the rail ------------------------------------------------------
 * Supplies keeps the logo inside the sidebar so it collapses with it. The markup moves the brand
 * into <aside>; these rules give it the rail's own height and swap the wordmark for the mark
 * when the rail is collapsed.
 */
.app-sidebar .sidebar-brand {
  display: flex; align-items: center; gap: 10px;
  height: 60px; padding: 0 20px; text-decoration: none; flex: none;
}
.app-sidebar .sidebar-brand-full { height: 34px; width: auto; display: block; }
.app-sidebar .sidebar-brand-mark { height: 32px; width: 32px; display: none; }
#sidebar.sidebar-menu-collapsed .sidebar-brand { justify-content: center; padding: 0; }
#sidebar.sidebar-menu-collapsed .sidebar-brand-full { display: none; }
#sidebar.sidebar-menu-collapsed .sidebar-brand-mark { display: block; }
/* At 80px there is no room for words. The item labels are bare text nodes inside the anchor,
 * with no element to hide, so the text is collapsed by size and the icon given its own back. */
#sidebar.sidebar-menu-collapsed { overflow-x: hidden; }
#sidebar.sidebar-menu-collapsed .slide__category { display: none !important; }
#sidebar.sidebar-menu-collapsed .side-menu__item {
  justify-content: center; margin: 2px 8px; padding: 10px 0; font-size: 0 !important;
}
#sidebar.sidebar-menu-collapsed .side-menu__item i { font-size: 17px !important; margin: 0 !important; }
#sidebar.sidebar-menu-collapsed .side-menu__angle { display: none !important; }

/* Hamburger: an icon, not a button. */
.app-header .sidebar-toggle {
  border: 0; background: transparent; padding: 6px 8px; color: var(--cj-ink); box-shadow: none;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 8px;
}
.app-header .sidebar-toggle:hover { background: #ecedea; }
.app-header .sidebar-toggle i { font-size: 20px; line-height: 1; }

/* Plain text controls: globe + label + chevron, no pill, no fill. */
.app-header .header-plain, .app-header .btn-group > .btn.header-plain {
  background: transparent !important; color: var(--cj-ink) !important; border: 0 !important;
  box-shadow: none !important; font-weight: 500; font-size: 14px; padding: 6px 8px !important; height: 36px;
  border-radius: 8px;
}
.app-header .header-plain:hover { background: #ecedea !important; }

/* The accounting period is metadata. */
.app-header .header-element > h6:not(.mb-0) { font-size: 14px; font-weight: 500; color: var(--cj-muted); padding: 0 8px; }

/* Icon buttons: equal 36px circles with the count anchored to the corner. The profile control is
 * also a .header-link but carries an avatar and two lines of text, so it is excluded. */
.app-header .header-link:not(#mainHeaderProfile) {
  position: relative; display: inline-flex !important; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 999px; background: #ecedea; color: var(--cj-ink);
  padding: 0; text-decoration: none;
}
.app-header .header-link:not(#mainHeaderProfile):hover { background: #e3e4df; }
.app-header .header-link-icon { font-size: 17px; line-height: 1; margin: 0; }
.app-header .header-icon-badge {
  position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 5px; font-size: 11px; font-weight: 700; line-height: 1; border-radius: 999px;
  background: var(--cj-accent) !important; color: var(--cj-ink) !important; border: 2px solid #fff;
}

/* Profile: avatar, then name and role, with room to breathe. */
.app-header #mainHeaderProfile { display: inline-flex; align-items: center; gap: 10px; padding: 4px 8px 4px 4px; border-radius: 999px; text-decoration: none; margin-left: 4px; }
.app-header #mainHeaderProfile:hover { background: #ecedea; }
.app-header #mainHeaderProfile .rounded-circle { background: var(--cj-ink) !important; color: #fff !important; font-size: 13px; }

/* Breadcrumb: part of the bar, not a boxed strip under it. */
.finance-breadcrumb, nav.finance-breadcrumb {
  background: transparent !important; border: 0 !important; padding: 0 !important; margin: 0 0 16px !important;
}
.finance-breadcrumb .breadcrumb { margin: 0; font-size: 14px; }
.finance-breadcrumb .breadcrumb-item a, .breadcrumb-item a { color: var(--cj-muted) !important; text-decoration: none; font-weight: 400 !important; }
.finance-breadcrumb .breadcrumb-item a:hover { color: var(--cj-ink) !important; }
.finance-breadcrumb .breadcrumb-item.active { color: var(--cj-ink) !important; font-weight: 600; }
.breadcrumb-item + .breadcrumb-item::before { content: "\203A"; color: var(--cj-faint); }

/* HR shell -----------------------------------------------------------------
 * HR uses its own class names (nav.side-navbar, .site-logo-container, .header) and carries a
 * 108-item menu, so the schema's 48px nav rows would make it unusable. Colour, type, radius and
 * the active state follow the schema; the density stays HR's own.
 */
nav.side-navbar, .side-navbar, .side-navbar-wrapper, .navbar-header { background: var(--cj-rail) !important; }
.side-navbar ul a, .side-navbar li a {
  color: #e8e8e4 !important; font-size: 13px; font-weight: 400;
  padding: 7px 10px; border-radius: var(--cj-radius-sm); margin: 1px 6px;
}
.side-navbar ul a:hover, .side-navbar li a:hover { background: var(--cj-rail-accent) !important; color: #fff !important; }
.side-navbar li.active > a, .side-navbar ul li a.active {
  background: var(--cj-rail-accent) !important; color: var(--cj-accent) !important;
  /* The rail marks the active item with fill, not with an edge stripe. */
  border-left: 0 !important;
}
.side-navbar .sidenav-header, .side-navbar .side-menu .heading, .side-navbar .brand-small {
  color: #8a8b84 !important; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; padding: 14px 16px 6px;
}
/* The brand sits inside the rail (moved out of the header), so it hides with it. HR's toggle
 * hides the rail entirely rather than collapsing it to icons, so there is no icon-only state. */
/* The header is fixed at z-index 1050 and spans the full width, so the rail has to sit above it
 * for the brand to show; otherwise the bar paints over the top of the rail. */
nav.side-navbar { top: 0 !important; height: 100vh !important; z-index: 1060 !important; }
nav.side-navbar .sidebar-brand {
  display: flex; align-items: center; gap: 10px;
  height: 60px; padding: 0 16px; text-decoration: none; flex: none;
  background: var(--cj-rail);
}
nav.side-navbar .sidebar-brand-full { height: 32px; width: auto; display: block; }
nav.side-navbar .sidebar-brand-mark { height: 30px; width: 30px; display: none; }
/* The bar starts after the rail, and reclaims the space when the rail is hidden. */
header.header nav.navbar { padding-left: 216px !important; transition: padding-left .2s; }
body:has(nav.side-navbar.shrink) header.header nav.navbar { padding-left: 16px !important; }

/* HR top bar: same shape as Finance and Supplies. HR paints its whole navbar charcoal, so the
 * bar is brought back to the light surface and only the logo block stays as part of the rail. */
.header, header.header {
  background: var(--cj-card) !important;
  border-bottom: 1px solid var(--cj-line) !important;
  box-shadow: none !important;
}
header.header nav.navbar, header.header .navbar {
  background: var(--cj-card) !important; min-height: 60px; padding: 0 16px;
  /* The template sets a near-white colour on the navbar for its dark original; every child
   * inherits it, so on a light bar the labels disappear. */
  color: var(--cj-ink) !important;
}
header.header nav.navbar *:not(.site-logo-container):not(.site-logo):not(.badge) { color: inherit; }
header.header .site-logo-container { border-radius: 0 !important; padding: 0 16px !important; display: inline-flex; align-items: center; height: 60px; }
header.header nav.navbar a, header.header .system-title,
header.header nav.navbar .nav-link, header.header nav.navbar .menu-btn {
  color: var(--cj-ink) !important;
}
/* The rail carries the brand, so the bar does not shout the system name. */
header.header .system-title {
  font-size: 15px; font-weight: 600; letter-spacing: normal; text-transform: none; margin-left: 4px;
}
header.header .menu-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--cj-radius-sm); margin-left: 8px;
}
header.header .menu-btn:hover { background: #ecedea; }

/* The rail carries the brand and the page carries its own title, so the bar does not repeat the
 * system name. Matches Finance. */
header.header .system-title { display: none !important; }

/* Icon controls: equal circles, count anchored to the corner in brand yellow. The profile control
 * holds an avatar and a name, so it is excluded rather than squeezed into a circle. */
header.header .nav-menu > .nav-item > a:not(:has(.profile-photo)) {
  position: relative; display: inline-flex !important; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 999px; background: #ecedea; color: var(--cj-ink) !important;
  margin-left: 8px; padding: 0;
}
header.header .nav-menu > .nav-item > a:not(:has(.profile-photo)):hover { background: #e3e4df; }

/* Profile: avatar then name, with room to breathe. */
header.header .nav-menu > .nav-item > a:has(.profile-photo) {
  display: inline-flex !important; align-items: center; gap: 8px;
  padding: 4px 10px 4px 4px; border-radius: 999px; margin-left: 8px; background: transparent;
}
header.header .nav-menu > .nav-item > a:has(.profile-photo):hover { background: #ecedea; }
header.header .profile-photo { width: 32px; height: 32px; border-radius: 999px; object-fit: cover; margin: 0 !important; }
header.header .nav-menu .badge, header.header .nav-menu .badge-danger {
  position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 5px;
  font-size: 11px; font-weight: 700; line-height: 1; border-radius: 999px;
  background: var(--cj-accent) !important; color: var(--cj-ink) !important; border: 2px solid #fff;
}
/* The workspace switcher and the account block are controls, not chrome: a hairline pill with
 * ink text, matching the country picker in Finance. */
header.header .nav-menu .dropdown-toggle, header.header .nav-menu .btn,
header.header .btn.btn-dark, header.header .btn-secondary, header.header .btn-primary {
  background: var(--cj-card) !important; border: 1px solid var(--cj-line) !important;
  box-shadow: none !important; color: var(--cj-ink) !important;
  font-weight: 500; font-size: 14px; border-radius: 999px; padding: 6px 14px !important; height: 36px;
}
header.header .nav-menu .dropdown-toggle:hover, header.header .btn.btn-dark:hover { background: #f6f6f3 !important; }
header.header .nav-menu .dropdown-toggle *, header.header .btn.btn-dark * { color: var(--cj-ink) !important; }
/* HR's workspace switcher paints itself #111827 in its own stylesheet. */
header.header .workspace-switcher-toggle {
  background: var(--cj-card) !important; border: 1px solid var(--cj-line) !important;
  color: var(--cj-ink) !important; border-radius: 999px !important; height: 36px; padding: 6px 14px !important;
  box-shadow: none !important;
}
header.header .workspace-switcher-toggle:hover { background: #f6f6f3 !important; }
header.header .workspace-switcher-toggle *, header.header .workspace-switcher-label,
header.header .workspace-switcher-label strong { color: var(--cj-ink) !important; }