/* CloudStaff AI OS installation-only branding overlay. */
:root {
  --primary: 207 91% 32%;
  --primary-foreground: 0 0% 100%;
  --ring: 199 94% 48%;
  --accent: 200 100% 96%;
  --accent-foreground: 204 88% 30%;
  --portal-nav-bg: #075a9c;
  --portal-nav-bg-hover: #086fb9;
  --portal-nav-bg-active: #0a80ca;
  --portal-nav-accent: #7dd3fc;
  --portal-top-text: #075a9c;
}

.dark {
  --primary: 198 91% 56%;
  --primary-foreground: 205 92% 16%;
  --ring: 198 91% 56%;
  --accent: 204 57% 20%;
  --accent-foreground: 198 100% 91%;
  --portal-nav-bg: #064b82;
  --portal-nav-bg-hover: #075f9f;
  --portal-nav-bg-active: #087fc4;
  --portal-nav-accent: #8ad7fb;
  --portal-top-text: #8ad7fb;
}

::selection {
  background: rgb(125 211 252 / 0.45);
  color: #063c67;
}

[class~="bg-[#0c385e]"] { background-color: var(--portal-nav-bg) !important; }
[class~="bg-[#144e85]"] { background-color: var(--portal-nav-bg-active) !important; }
[class~="hover:bg-[#0f4577]"]:hover,
[class~="hover:bg-[#1a6b9c]"]:hover { background-color: var(--portal-nav-bg-hover) !important; }
/* These classes are also used as semantic dark text on light cards. They must
 * not inherit the chrome mode token, which becomes pale in the dark shell. */
[class~="text-[#0c385e]"],
[class~="text-[#144e85]"] { color: #075a9c !important; }
[class~="text-[#50bbf0]"] { color: var(--portal-nav-accent) !important; }
[class~="border-[#50bbf0]"] { border-color: var(--portal-nav-accent) !important; }
.site-brand__mark img { display: block; width: 2rem; height: 2rem; object-fit: contain; }

/* Section labels are small uppercase navigation text and need full readable
 * contrast on both the default and highlighted sidebar surfaces. */
.portal-sidebar-section {
  color: rgb(255 255 255 / 0.78) !important;
}

/* Slate-400 is too pale for the small secondary copy used inside white cards.
 * Scope the correction to explicitly white surfaces so dark chrome keeps its
 * intended light-on-dark treatment. */
[class~="bg-white"] [class~="text-slate-400"],
[class~="bg-white"][class~="text-slate-400"],
[class~="bg-white"] [class~="text-slate-300"],
[class~="bg-white"][class~="text-slate-300"],
[class~="bg-white/80"] [class~="text-slate-400"],
[class~="bg-white/80"][class~="text-slate-400"],
[class~="bg-white/80"] [class~="text-slate-300"],
[class~="bg-white/80"][class~="text-slate-300"] {
  color: #64748b !important;
}

/* Positive finance deltas use normal-size copy; emerald-600 is too light on
 * the dashboard's near-white finance cards. */
[class~="bg-[#f8fbfe]"] [class~="text-emerald-600"] {
  color: #047857 !important;
}

/* Keep destructive text actions and inactive tab labels over the WCAG AA
 * threshold on the portal's pale slate surfaces. */
[class~="text-rose-600"] {
  color: #be123c !important;
}

[role="tab"][data-state="inactive"] {
  color: #475569 !important;
}

/* Normal-size white labels require a slightly deeper brand surface. */
[class~="bg-sky-600"] {
  background-color: #0369a1 !important;
}

.messenger-text-dim {
  color: rgb(255 255 255 / 0.62) !important;
}

/* The sidebar item color otherwise wins over the active locale chip text. */
[data-testid="runtime-language-toggle"] span.bg-white {
  color: #075a9c !important;
}

/* Keep utility actions aligned to the right edge instead of clustering after search. */
.cloudstaff-topbar-actions {
  margin-left: auto !important;
}

/* Keep department cards aligned while allowing long Company Structure titles
 * to use the requested two-line label on this installation only. */
.cloudstaff-department-title-two-lines {
  display: -webkit-box;
  min-height: 2.5rem;
  overflow: hidden;
  overflow-wrap: anywhere;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* Show the existing global directory search whenever the desktop header has room. */
@media (min-width: 1024px) and (max-width: 1535.98px) {
  .cloudstaff-compact-header-brand {
    flex: 0 0 260px !important;
  }

  .cloudstaff-responsive-directory-search {
    display: block !important;
    flex: 0 1 420px !important;
    min-width: 240px !important;
    max-width: 420px !important;
  }

  .cloudstaff-compact-search-trigger {
    display: none !important;
  }
}

@media (min-width: 1024px) and (max-width: 1199.98px) {
  .cloudstaff-compact-header-brand {
    flex-basis: 200px !important;
  }

  .cloudstaff-responsive-directory-search {
    min-width: 200px !important;
    max-width: 320px !important;
  }
}