/* ============================================================================
   NiyuktiAI — application shell and components

   Three layers, in this order:
     1. tokens.css   the palette, type scale and elevation (unchanged)
     2. bootstrap    grid, dropdowns, modals, tabs, offcanvas, toasts, forms
     3. this file    Bootstrap pointed at our tokens, plus the parts of the
                     product Bootstrap has no opinion about — the nav rail,
                     the job cards, the live portal surface.

   Bootstrap is configured, not overridden: its own custom properties are set
   to our token values, so a .btn or a .card picks up the product's palette
   without a single !important.
   ========================================================================== */

/* --- Bootstrap, wired to our tokens --------------------------------------- */

/* --- The typefaces ------------------------------------------------------- *
 * The React build had Next.js define these four variables from its font
 * loader; the token file refers to them by name. Loading the same families
 * from Google Fonts and naming them here keeps tokens.css untouched.        */

:root {
  --font-inter: "Inter";
  --font-jakarta: "Plus Jakarta Sans";
  --font-playfair: "Playfair Display";
  --font-caveat: "Caveat";
}

:root {
  --bs-body-bg: var(--background);
  --bs-body-color: var(--foreground);
  --bs-body-font-family: var(--font-sans);
  --bs-body-font-size: var(--text-base);
  --bs-body-line-height: var(--text-base--line-height);
  --bs-border-color: var(--border);
  --bs-border-radius: var(--radius);
  --bs-border-radius-sm: calc(var(--radius) - 0.25rem);
  --bs-border-radius-lg: calc(var(--radius) + 0.25rem);
  --bs-border-radius-xl: calc(var(--radius) + 0.5rem);
  --bs-primary: var(--primary);
  --bs-primary-rgb: 105, 54, 239; /* #6936ef — brand-600, for Bootstrap's rgba() */
  --bs-secondary-color: var(--muted-foreground);
  --bs-emphasis-color: var(--foreground);
  --bs-link-color: var(--primary);
  --bs-link-hover-color: var(--primary-hover);
  --bs-focus-ring-color: color-mix(in oklab, var(--ring) 40%, transparent);
  --bs-focus-ring-width: 2px;

  /* The rail's two widths, so the shell and the toggle agree on one number. */
  --rail-width: 16rem;
  --rail-width-collapsed: 4.5rem;
  --topbar-height: 4rem;
}

/* --- Base ---------------------------------------------------------------- *
 * The React build set these in Tailwind's base layer. Same declarations,
 * written out.                                                              */

* {
  border-color: var(--border);
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--text-base--line-height);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01";
  text-rendering: optimizeLegibility;
  margin: 0;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  text-wrap: balance;
}

:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

::selection {
  background-color: var(--brand-100);
  color: var(--brand-900);
}

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

/* Font Awesome glyphs are text, so they take the colour and the weight of
   whatever they sit in for free. What they do not do on their own is hold a
   consistent box: a `fa-users` is wider than a `fa-check`, and in a flex row
   that shifts everything beside it. A fixed square keeps every icon in the
   product on the same grid, whatever glyph it is. */
.fa-solid,
.fa-regular,
.fa-brands {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  font-size: 1rem;
  line-height: 1;
  vertical-align: -0.125em;
}

/* A scrollbar that does not shout, for the rail and the long panels. */
.scrollbar-slim {
  scrollbar-width: thin;
  scrollbar-color: var(--neutral-300) transparent;
}
.scrollbar-slim::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.scrollbar-slim::-webkit-scrollbar-thumb {
  background: var(--neutral-300);
  border-radius: 999px;
}
.scrollbar-slim::-webkit-scrollbar-track {
  background: transparent;
}