/* ============================================================================
   NiyuktiAI — The rail, the topbar and the mobile bar

   Load order: tokens.css, base.css, components.css, shell.css, pages.css.
   Bootstrap comes before all of them and is configured by base.css rather
   than overridden — its custom properties are pointed at our tokens.
   ========================================================================== */

/* ============================================================================
   The shell
   ========================================================================== */

.app-shell {
  display: flex;
  min-height: 100dvh;
  background-color: var(--background);
}

.app-main-column {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
}

.app-main {
  flex: 1 1 auto;
  padding: 1.5rem 1rem 6rem;
}

.app-main > .app-container {
  margin-inline: auto;
  width: 100%;
  max-width: 88rem;
}

/*
 * The bottom bar is fixed and does not go away until 992px, so everything
 * between here and there has to keep reserving room for it. Handing that band
 * 2.5rem — less than the bar's own ~62px — put the last card of every page
 * underneath it: on a tablet in portrait the dashboard's document vault, the
 * jobs grid's final row and the profile's education card were all partly
 * covered. Five rem clears the bar, and the safe area is added on top of it
 * because the bar reserves that too.
 */
@media (min-width: 768px) {
  .app-main {
    padding-inline: 1.5rem;
    padding-bottom: calc(5rem + env(safe-area-inset-bottom));
  }
}

@media (min-width: 992px) {
  .app-main {
    padding-inline: 2rem;
    padding-top: 2rem;
    padding-bottom: 2.5rem; /* the bar is gone at this width */
  }
}

/* --- Navigation rail ------------------------------------------------------ */

.rail {
  position: sticky;
  top: 0;
  display: none;
  height: 100dvh;
  flex-direction: column;
  flex-shrink: 0;
  width: var(--rail-width);
  background-color: var(--surface);
  border-right: 1px solid var(--border);
  transition: width 250ms ease-out;
}

@media (min-width: 992px) {
  .rail {
    display: flex;
  }
}

.rail[data-collapsed="true"] {
  width: var(--rail-width-collapsed);
}

.rail-head {
  display: flex;
  flex-shrink: 0;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1rem 1rem 0.75rem;
}

.rail[data-collapsed="true"] .rail-head {
  height: 4rem;
  justify-content: center;
  padding: 1rem 0.75rem 0;
}

.rail-tagline {
  color: var(--muted-foreground);
  margin: 0.375rem 0 0;
  font-size: var(--text-2xs);
  line-height: 1.375;
  text-wrap: pretty;
}

.rail-nav {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0.5rem 0.75rem;
}

.rail-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.rail-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-radius: 0.5rem;
  padding: 0.625rem 0.75rem;
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--muted-foreground);
  transition: background-color 150ms, color 150ms;
}

.rail-link:hover {
  background-color: var(--secondary);
  color: var(--foreground);
}

.rail-link[aria-current="page"] {
  background-color: var(--primary-subtle);
  color: var(--primary-subtle-foreground);
}

.rail-link .fa-solid {
  font-size: 1.125rem;
}

.rail-link span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rail[data-collapsed="true"] .rail-link {
  justify-content: center;
  padding-inline: 0.5rem;
}

.rail[data-collapsed="true"] .rail-link span,
.rail[data-collapsed="true"] .rail-hide-collapsed {
  display: none;
}

.rail-foot {
  border-top: 1px solid var(--border);
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* The unread count on Alerts: a pill when there is room, a dot when there
   is not — the collapsed rail has no width for a number. */
.rail-count {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

.rail[data-collapsed="true"] .rail-count {
  position: absolute;
  top: 0.375rem;
  right: 0.375rem;
  margin: 0;
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  border-radius: 999px;
  background-color: var(--destructive);
  font-size: 0;
  overflow: hidden;
}

/* --- Topbar --------------------------------------------------------------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  height: var(--topbar-height);
  flex-shrink: 0;
  align-items: center;
  gap: 0.75rem;
  border-bottom: 1px solid var(--border);
  background-color: color-mix(in oklab, var(--surface) 85%, transparent);
  backdrop-filter: blur(12px);
  padding-inline: 1rem;
}

@media (min-width: 768px) {
  .topbar {
    padding-inline: 1.5rem;
  }
}

@media (min-width: 992px) {
  .topbar {
    padding-inline: 2rem;
  }
}

.topbar-search {
  position: relative;
  flex: 1 1 auto;
  max-width: 26rem;
}

.topbar-search .fa-solid {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  translate: 0 -50%;
  font-size: 1rem;
  color: var(--muted-foreground);
  pointer-events: none;
}

.topbar-search input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background-color: var(--surface-sunken);
  padding: 0.5rem 0.75rem 0.5rem 2.25rem;
  font-size: var(--text-base);
  color: var(--foreground);
}

.topbar-search input::placeholder {
  color: var(--muted-foreground);
}

.topbar-search kbd {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  translate: 0 -50%;
  border: 1px solid var(--border);
  border-radius: 0.25rem;
  background-color: var(--surface);
  padding: 0.0625rem 0.3125rem;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--muted-foreground);
}

/*
 * A phone has no Ctrl key, and at 390px the hint was covering most of a field
 * already squeezed to 97px by the buttons beside it — the placeholder read
 * "Se" with "Ctrl K" sitting on top of it. Below the rail's breakpoint the
 * hint goes and the field keeps a width worth typing into; the "Find a job"
 * button loses its label to make the room, since its icon and the bottom
 * bar's Jobs tab both still say what it is.
 */
@media (max-width: 991.98px) {
  .topbar-search kbd {
    display: none;
  }
}

@media (max-width: 575.98px) {
  .topbar {
    gap: 0.5rem;
  }

  .topbar-search {
    min-width: 9rem;
  }

  .topbar .ms-auto .btn-primary {
    gap: 0;
    padding-inline: 0.625rem;
    font-size: 0;
  }

  .topbar .ms-auto .btn-primary .fa-solid {
    font-size: var(--text-base);
  }
}

/* --- The mobile menu drawer ----------------------------------------------- *
 * Built from the rail by core/ui.js, so it wears the rail's own link styles
 * and only needs its frame here.                                             */

.mobile-rail {
  width: min(18rem, 85vw);
}

.mobile-rail .offcanvas-header {
  border-bottom: 1px solid var(--border);
}

.mobile-rail .offcanvas-body {
  padding: 0;
}

.mobile-rail .rail-nav {
  overflow: visible;
}

/* --- Mobile bottom bar ---------------------------------------------------- */

.mobile-nav {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 40;
  display: grid;
  grid-auto-flow: column;
  border-top: 1px solid var(--border);
  background-color: color-mix(in oklab, var(--surface) 92%, transparent);
  backdrop-filter: blur(12px);
  padding-bottom: env(safe-area-inset-bottom);
}

@media (min-width: 992px) {
  .mobile-nav {
    display: none;
  }
}

.mobile-nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
  padding: 0.5rem 0.25rem;
  font-size: var(--text-2xs);
  font-weight: 500;
  color: var(--muted-foreground);
}

.mobile-nav a[aria-current="page"] {
  color: var(--primary);
}

.mobile-nav .fa-solid {
  font-size: 1.25rem;
}