/* Oktai Recruiter Portal — base resets. Copied from the decoded export's
   base <style> block verbatim. */

html, body { margin: 0; padding: 0; background: var(--page); color-scheme: light; }
select, option, optgroup, input, textarea { color-scheme: light; }
html[data-theme="dark"], html[data-theme="dark"] select, html[data-theme="dark"] option,
html[data-theme="dark"] optgroup, html[data-theme="dark"] input, html[data-theme="dark"] textarea { color-scheme: dark; }
* { box-sizing: border-box; }
body { font-family: var(--font-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: var(--blue-500); text-decoration: none; }
a:hover { color: var(--blue-600); text-decoration: underline; }
input::placeholder, textarea::placeholder { color: #b6c2cd; }

/* !important throughout: every page's .xx-select class sets `background`
   as a shorthand (for the fill color), which silently resets
   background-image/-repeat/-position back to none. Without !important
   here, each page's stylesheet (loaded after this one, and with higher
   specificity via its class selector) was winning and every dropdown
   sitewide rendered with no arrow at all. */
select {
  appearance: none !important; -webkit-appearance: none !important;
  padding-right: 28px !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a99a8' stroke-width='2.4' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 9px center !important;
}
input, select, textarea { font-family: var(--font-body); }

/* Every page's inputs/selects set their own background/border/color
   unconditionally, which drowns out the browser's default (and often
   subtle) disabled dimming -- read-only views (e.g. non-admin on My
   Companies) ended up looking editable even though clicks/typing were
   blocked. !important so this always wins over the per-page field classes. */
input:disabled, select:disabled, textarea:disabled,
input[readonly], textarea[readonly] {
  background: var(--surface-2) !important;
  color: var(--ink-3) !important;
  cursor: default !important;
  opacity: 1 !important;
}
select:disabled {
  appearance: none !important; -webkit-appearance: none !important;
  background-image: none !important; padding-right: 11px !important;
}
/* Chips / segmented toggles (qualifications, TWIC, etc.) also render as
   disabled <button>s in read-only views -- dim them the same way .btn
   already dims, so they don't look clickable. */
button:disabled { opacity: 0.55; cursor: not-allowed; }

/* The export relies on the Claude Design editor's own base reset for
   this (not present in the exported markup) -- without it, the UA
   default button padding (e.g. Chrome's 1px 6px) throws off every
   fixed-size icon button in the shell. */
button {
  margin: 0; padding: 0; border: 0; background: none;
  font: inherit; color: inherit; text-align: inherit;
}

/* generic hover/active affordance for plain icon buttons throughout the
   shell (gear/bell/back/logout) -- the export drives this via
   style-hover=".." per-element; we use a shared class instead since we
   hand-write real CSS. */
.icon-btn {
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 9px;
  background: var(--surface); color: var(--ink-2); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.icon-btn:hover { background: var(--surface-2); color: var(--ink); }