/* fonts */

@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
.poppins-thin {
  font-family: "Poppins", serif;
  font-weight: 100;
  font-style: normal;
}

.poppins-extralight {
  font-family: "Poppins", serif;
  font-weight: 200;
  font-style: normal;
}

.poppins-light {
  font-family: "Poppins", serif;
  font-weight: 300;
  font-style: normal;
}

.poppins-regular {
  font-family: "Poppins", serif;
  font-weight: 400;
  font-style: normal;
}

.poppins-medium {
  font-family: "Poppins", serif;
  font-weight: 500;
  font-style: normal;
}

.poppins-semibold {
  font-family: "Poppins", serif;
  font-weight: 600;
  font-style: normal;
}

.poppins-bold {
  font-family: "Poppins", serif;
  font-weight: 700;
  font-style: normal;
}

.poppins-extrabold {
  font-family: "Poppins", serif;
  font-weight: 800;
  font-style: normal;
}

.poppins-black {
  font-family: "Poppins", serif;
  font-weight: 900;
  font-style: normal;
}

.poppins-thin-italic {
  font-family: "Poppins", serif;
  font-weight: 100;
  font-style: italic;
}

.poppins-extralight-italic {
  font-family: "Poppins", serif;
  font-weight: 200;
  font-style: italic;
}

.poppins-light-italic {
  font-family: "Poppins", serif;
  font-weight: 300;
  font-style: italic;
}

.poppins-regular-italic {
  font-family: "Poppins", serif;
  font-weight: 400;
  font-style: italic;
}

.poppins-medium-italic {
  font-family: "Poppins", serif;
  font-weight: 500;
  font-style: italic;
}

.poppins-semibold-italic {
  font-family: "Poppins", serif;
  font-weight: 600;
  font-style: italic;
}

.poppins-bold-italic {
  font-family: "Poppins", serif;
  font-weight: 700;
  font-style: italic;
}

.poppins-extrabold-italic {
  font-family: "Poppins", serif;
  font-weight: 800;
  font-style: italic;
}

.poppins-black-italic {
  font-family: "Poppins", serif;
  font-weight: 900;
  font-style: italic;
}
:root {
  --evaryst-blue: #0b65b1;
  --evaryst-light-blue: #0087fe;
  --evaryst-blue-font: #0087fe;
  --evaryst-teal: #0d9488;
  --on-evaryst-light-blue: #fff;
  --on-evaryst-blue: #fff;
  --dark-gray-text: #0d1e25;
  --divider-color: #eaeaea;

  /* Admin portal */
  --admin-sidebar-width: 260px;

  /* headings */
  --h1-text-color: #0d1e25;
  --h2-text-color: ;
  --h3-text-color: ;
  --h4-text-color: ;

  /* Responsive HORIZONTAL spacing - shrinks on smaller screens */
  --evaryst-spacing-xs: 0.25rem;  /* 4px - equivalent to Bootstrap p-1 */
  --evaryst-spacing-sm: 0.5rem;   /* 8px - equivalent to Bootstrap p-2 */
  --evaryst-spacing-md: 1rem;     /* 16px */
  --evaryst-container-padding: 0.25rem;
  --evaryst-container-margin: 0.25rem;

  /* VERTICAL spacing - stays fixed to prevent label overlap */
  --evaryst-spacing-vertical-xs: 0.25rem;  /* 4px - fixed */
  --evaryst-spacing-vertical-sm: 0.5rem;   /* 8px - fixed */

  /* Button design tokens */
  --evaryst-btn-border-radius: 4px;
  --evaryst-btn-transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
  --evaryst-btn-disabled-opacity: 0.45;
  --evaryst-red: #dc2626;
  --evaryst-remove-red: #e32400; /* the remove/delete "X" affordance (EvarystRemoveIcon) — intentionally distinct from --evaryst-red */
  --evaryst-green: #16a34a;
  --evaryst-dark-green: #15803d;
  --evaryst-focus-ring: 0 0 0 2px rgba(0, 135, 254, 0.25);
  --evaryst-row-hover-bg: #f1f5f9;
}

/* Responsive spacing overrides for 13" laptops */
@media (max-width: 1366px) {
  :root {
    --evaryst-spacing-xs: 0.1875rem;  /* 3px */
    --evaryst-spacing-sm: 0.25rem;    /* 4px */
    --evaryst-spacing-md: 0.5rem;     /* 8px */
    --evaryst-container-padding: 0.125rem;
    --evaryst-container-margin: 0.125rem;
    /* vertical spacing stays the same */
  }
}

/* Responsive spacing overrides for smaller laptops */
@media (max-width: 1280px) {
  :root {
    --evaryst-spacing-xs: 0.125rem;  /* 2px - minimum to prevent fields touching */
    --evaryst-spacing-sm: 0.1875rem; /* 3px */
    --evaryst-spacing-md: 0.25rem;   /* 4px */
    --evaryst-container-padding: 0.0625rem;  /* 1px */
    --evaryst-container-margin: 0.0625rem;   /* 1px */
    /* vertical spacing stays the same */
  }
}

/* Responsive padding utility classes - use instead of Bootstrap p-1, p-2, etc.
   NOTE: ep-1 shrinks horizontal padding but keeps vertical padding fixed */
.ep-1 {
  padding-left: var(--evaryst-spacing-xs);
  padding-right: var(--evaryst-spacing-xs);
  padding-top: var(--evaryst-spacing-vertical-xs);
  padding-bottom: var(--evaryst-spacing-vertical-xs);
}
.ep-2 {
  padding-left: var(--evaryst-spacing-sm);
  padding-right: var(--evaryst-spacing-sm);
  padding-top: var(--evaryst-spacing-vertical-sm);
  padding-bottom: var(--evaryst-spacing-vertical-sm);
}
.ep-3 { padding: var(--evaryst-spacing-md); }

.epx-1 { padding-left: var(--evaryst-spacing-xs); padding-right: var(--evaryst-spacing-xs); }
.epx-2 { padding-left: var(--evaryst-spacing-sm); padding-right: var(--evaryst-spacing-sm); }
.epy-1 { padding-top: var(--evaryst-spacing-vertical-xs); padding-bottom: var(--evaryst-spacing-vertical-xs); }
.epy-2 { padding-top: var(--evaryst-spacing-vertical-sm); padding-bottom: var(--evaryst-spacing-vertical-sm); }

/* Responsive margin utility classes - use instead of Bootstrap m-1, m-2, etc.
   NOTE: em-1 shrinks horizontal margin but keeps vertical margin fixed */
.em-1 {
  margin-left: var(--evaryst-spacing-xs);
  margin-right: var(--evaryst-spacing-xs);
  margin-top: var(--evaryst-spacing-vertical-xs);
  margin-bottom: var(--evaryst-spacing-vertical-xs);
}
.em-2 {
  margin-left: var(--evaryst-spacing-sm);
  margin-right: var(--evaryst-spacing-sm);
  margin-top: var(--evaryst-spacing-vertical-sm);
  margin-bottom: var(--evaryst-spacing-vertical-sm);
}
.em-3 { margin: var(--evaryst-spacing-md); }

.emx-1 { margin-left: var(--evaryst-spacing-xs); margin-right: var(--evaryst-spacing-xs); }
.emx-2 { margin-left: var(--evaryst-spacing-sm); margin-right: var(--evaryst-spacing-sm); }
.emy-1 { margin-top: var(--evaryst-spacing-vertical-xs); margin-bottom: var(--evaryst-spacing-vertical-xs); }
.emy-2 { margin-top: var(--evaryst-spacing-vertical-sm); margin-bottom: var(--evaryst-spacing-vertical-sm); }

/* Responsive container class */
.evaryst-container {
  padding: var(--evaryst-container-padding);
  margin: var(--evaryst-container-margin);
}

html {
  font-size: 16px;
  height: 100%;
  overflow: hidden;
}

html,
body {
  font-family: "Poppins", serif;
  font-weight: 400;
  font-style: normal;
  /* font-size: 0.875rem; */
  font-size: 16px;
  color: #0d1e25;
}

body {
  height: 100%;
  overflow: hidden;
  margin: 0;
}

a,
.btn-link {
  color: #006bb7;
}

.btn-primary {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
  padding-top: 1.1rem;
}
h1 {
  font-family: Poppins;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 2.25rem;
  letter-spacing: -2%;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  /* color: var(--dark-gray-text, #0d1e25); */
  color: var(--h1-text-color, var(--evaryst-blue-font, #0d1e25));
  margin: auto;
}
h1:focus {
  outline: none;
}
h2 {
  color: var(--h2-text-color, var(--evaryst-blue-font, #0087fe));
  font-family: "Poppins", serif;
  font-size: 1.25rem;
  font-weight: 600;
  font-style: normal;
  letter-spacing: -2%;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  margin: auto;
}
h3 {
  color: var(--h3-text-color, var(--evaryst-blue-font, #0087fe));
  font-family: "Poppins", serif;
  font-size: 1rem;
  font-weight: 600;
  font-style: normal;
  letter-spacing: -2%;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  margin: auto;
}
h4 {
  color: var(--h4-text-color, var(--evaryst-blue-font, #0087fe));
  font-family: "Poppins", serif;
  font-size: 0.875rem;
  font-weight: 600;
  font-style: normal;
  letter-spacing: -2%;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  margin: auto;
}
.mud-grid-spacing-xs-6 {
  width: 100%;
  margin: auto;
}
.mud-grid-spacing-xs-6 > .mud-grid-item {
  padding: 16px 8px 16px 8px;
}
.grid-item-header-row {
  margin-bottom: 10px;
  width: 100%;
  display: flex;
  align-content: center;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
}
.grid-item-title {
  padding: 0px !important;
}
.grid-item-button {
  padding: 0px !important;
  text-align: right;
  min-height: 30px;
}
.top-bar {
  padding: 5px 5px 0px 5px;
}
.sidebar {
  min-height: 100vh;
  border-right: 1px solid var(--divider-color, #eaeaea);
}
.left-navbar {
  min-height: 100vh;
}
.dashboard-title-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--divider-color, #eaeaea);
  padding: 16px 24px 16px 8px;
}
.dashboard-title {
}
.dashboard-date {
  font-family: "Poppins", serif;
  font-size: 1rem;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0.1rem;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  line-height: 34px;
}
.dashboard-grid-item {
  border-right: 1px solid var(--divider-color, #eaeaea);
  /* border-bottom: 1px solid var(--divider-color, #eaeaea); */
  padding: 16px 8px 16px 8px;
  min-height: 100vh;
}
.valid.modified:not([type="checkbox"]) {
  outline: 1px solid #26b050;
}

.invalid {
  outline: 1px solid #e50000;
}

.validation-message {
  color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA9NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDg2IDYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcggODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=)
      no-repeat 1rem/1.8rem,
    #b32121;
  padding: 1rem 1rem 1rem 3.7rem;
  color: white;
}

.blazor-error-boundary::after {
  content: "An error has occurred.";
}

.darker-border-checkbox.form-check-input {
  border-color: #929292;
}

.pointer {
  cursor: pointer;
}

/* Clickable grid cell — apply to individual column templates that navigate */
.evaryst-clickable-cell {
  cursor: pointer;
  color: var(--evaryst-blue-font, #0087fe);
  transition: color 0.15s ease-in-out;
}
.evaryst-clickable-cell:hover {
  color: var(--evaryst-blue, #0b65b1);
  text-decoration: underline;
}

/* Clickable grid rows — apply via EvarystGrid ClickableRows parameter */
.clickable-rows .k-table-row {
  cursor: pointer;
}
.clickable-rows .k-table-row:hover {
  background-color: var(--evaryst-row-hover-bg, #f1f5f9);
}

/* Hide Telerik's k-grid-toolbar chrome (border/padding) when our inner
   .evaryst-grid-toolbar has no element children. Uses descendant `:has`
   (no `>`) so intermediate Telerik wrappers between .k-grid-toolbar and
   .evaryst-grid-toolbar don't break the match — those wrappers exist on
   some grid configurations and a strict-child selector hides toolbars that
   actually have content (Search.razor's View Profiles + Bulk Email buttons). */
.evaryst-grid .k-grid-toolbar:not(:has(.evaryst-grid-toolbar > *)) {
    display: none;
}

/* Toolbar layout: consumer content left, search right */
.evaryst-grid .evaryst-grid-toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
}

.evaryst-grid .evaryst-grid-toolbar:not(:has(> *)) {
    display: none;
}

/* US 2177: grid toolbar label matches SectionHeader exactly (same blue, weight, size).
   Size is 0.875rem because the Telerik tabstrip sets --kendo-font-size: 0.875rem (14px)
   on its content, so a SectionHeader inside a tab renders at 14px — NOT body's 16px.
   The label stays vertically centered in the toolbar row (no align-self override) so it
   lines up with a SectionHeader that has inline content — those render `align-items:
   center` (e.g. the publish toggle, the Documents upload button), centering the title
   in the row rather than pinning it to the top. The small `top` nudge raises it a few px
   to sit level with a SectionHeader tab's title (the toolbar row is button-height, so
   pure centering lands a touch low); `position: relative` so it doesn't reflow the row. */
.evaryst-grid .evaryst-grid-toolbar-label {
    position: relative;
    top: -4px;
    color: var(--evaryst-blue-font, #0087fe);
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: normal;
}

.evaryst-grid .evaryst-grid-toolbar-center {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin: 0 auto;
}

/* US 2177 note: grid-driven tab bodies deliberately have NO extra top gap — the grid's
   native Telerik toolbar (8px internal padding) already lines the label up with a
   SectionHeader tab's title. Don't add a container/ep-2 gap; it floats the grid below an
   empty band. */
.evaryst-grid .evaryst-grid-search {
    margin-left: auto;
}

.evaryst-grid .evaryst-grid-search .evaryst-search-input {
    width: 300px;
}

/* Pager number spacing for EvarystGrid */
.evaryst-grid .k-pager-numbers .k-button {
  margin: 0 2px;
}

/* Centralized header styling for all EvarystGrid instances */
.evaryst-grid .k-grid-header .k-header {
    font-weight: bold;
}

/* EvarystGrid refresh indicator */
.evaryst-grid-container {
    position: relative;
}

.evaryst-grid-refresh-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.4);
    z-index: 10;
    border-radius: inherit;
    pointer-events: auto;
}

.evaryst-grid-refresh-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--evaryst-blue, #0b65b1), transparent);
    animation: evaryst-grid-refresh-slide 1.2s ease-in-out infinite;
}

@keyframes evaryst-grid-refresh-slide {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.evaryst-blue {
  /* background-color: #0b65b1; Matching Figma. Formerly #27A3D2 - then #1567ae */
  background-color: var(--evaryst-blue, #0b65b1);
}

.evaryst-light-blue {
  /* background-color: #0087fe; Matching Figma. Formerly #f5fcff - then #178afa */
  background-color: var(--evaryst-light-blue, #0087fe);
}

.evaryst-list-header {
  background-color: var(--evaryst-light-blue, #0087fe);
  color: var(--on-evaryst-light-blue, #fff);
  padding: 0.5rem 1rem;
  font-weight: 600;
  font-size: 1rem;
  display: flex;
  align-items: center;
  border-radius: 4px 4px 0 0;
}

.list-header-btn,
.list-header-btn i {
  color: white !important;
}

.list-header-btn:hover {
  background-color: rgba(255, 255, 255, 0.15) !important;
}

.evaryst-blue-font {
  /* color: #0087fe; Matching Figma. Formerly #27A3D2 */
  color: var(--evaryst-blue-font, #0087fe);
}

.mud-input > input.mud-input-root-outlined,
div.mud-input-slot.mud-input-root-outlined {
  padding: 5px 5px;
}

.mud-input-control
  > .mud-input-control-input-container
  > div.mud-input.mud-input-text {
  margin-top: 0px;
}

.mud-input > textarea.mud-input-root-outlined {
  margin: 0.5rem;
}

.mud-button-group-root.mud-button-group-outlined-size-small
  .mud-button-root.mud-icon-button
  .mud-icon-root {
  font-size: 1rem;
}

.mud-button-group-root.mud-button-group-filled-size-small
  .mud-button-root.mud-icon-button
  .mud-icon-root {
  font-size: 0.9rem;
}
.mud-input {
  font-size: 0.7rem;
}

.k-tabstrip-content,
.k-tabstrip > .k-content {
  padding-block: 0px;
  padding-inline: 0px;
}

.container,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
  max-width: 100%;
}
.container-master {
  margin: 0px;
  padding: 0px;
  max-width: 100%;
}

.container-master .row {
  --bs-gutter-x: 0;
  --bs-gutter-y: 0;
}
.container-master .mt-6,
.container-master .my-6 {
  margin-top: auto !important;
  padding: 0px !important;
}

.k-menu:not(.k-context-menu) > .k-item {
  color: white;
}

.k-tabstrip-items-wrapper .k-tabstrip-item {
  color: white;
}

.k-tabstrip-items-wrapper .k-tabstrip-item:hover,
.k-tabstrip-items-wrapper .k-tabstrip-item.k-hover {
  color: black;
}

.k-menu:not(.k-context-menu) > .k-item:hover,
.k-menu:not(.k-context-menu) > .k-item.k-hover {
  color: white;
}

.k-appbar {
  padding-block: 4px;
}

/* Specificity bumped to .k-appbar.k-appbar-* (WI 2237): Telerik 13's theme colors the appbar grey and
   out-cascades a single-class override, so match both classes on the element to win the color back. */
.k-appbar.k-appbar-primary {
  color: var(--on-evaryst-blue, #fff);
  background-color: var(--evaryst-blue, #0b65b1);
}
.k-appbar.k-appbar-secondary {
  color: var(--on-evaryst-light-blue, #fff);
  background-color: var(--evaryst-light-blue, #0087fe);
}

.evaryst-header-logo {
  height: 32px;
  padding-left: 12px;
  display: block;
}

/* WI 2102 — Shrink the top menu's hover/click trigger zone down to roughly the menu
   text itself. By default each item's surface fills the full height of the blue bar,
   so sweeping the mouse down toward the tab strip accidentally opens the Search/
   People/Companies/Jobs dropdowns. Trimming the link's vertical padding shrinks the
   item (and with it the hover/click surface) to the text; the app bar keeps the menu
   vertically centered, so a non-interactive buffer is left both above and below the
   words. Scoped to the main top menu only (the user-profile menu is untouched). */
.evaryst-top-menu.k-menu > .k-item > .k-menu-link {
  padding-block: 2px;
}

/* App layout - fixed header with scrollable content */
.page:has(.app-layout),
.page:has(.app-layout) > main {
  height: 100%;
  overflow: hidden;
}

.app-layout {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.app-header {
  flex-shrink: 0;
  z-index: 100;
}

.app-content {
  flex: 1;
  overflow-y: auto;
  background: #f8fafc;
}

.copy-link-btn.evaryst-btn-flat:hover:not(:disabled) {
  background-color: transparent;
}

.copy-link-btn--external.evaryst-btn-flat {
  color: var(--evaryst-teal, #0d9488);
}

.copy-link-btn--external.evaryst-btn-flat:hover:not(:disabled) {
  background-color: transparent;
  color: var(--evaryst-teal, #0d9488);
}

.tab-header-row {
  padding: 2px 5px 0 5px;
}

.tab-header-row .k-tabstrip-items .k-link {
  padding-block: 4px;
  display: flex;
  align-items: center;
}

/* Ensure close button doesn't add extra height to tabs */
.tab-header-row .k-tabstrip-items .k-button {
  padding: 0;
  margin: 0;
  min-width: 16px;
  width: 16px;
  height: 16px;
  line-height: 1;
  border: none;
  background: transparent;
}

.tab-header-row .k-tabstrip-items .k-button .k-svg-icon,
.tab-header-row .k-tabstrip-items .k-button .k-icon {
  width: 12px;
  height: 12px;
  font-size: 12px;
}

/* Hide the TabStrip content area since we render content separately */
.tab-header-row .k-tabstrip-content,
.tab-header-row .k-tabstrip > .k-content {
  display: none;
}

/* Dashboard Calls panel */

.mud-checkbox > p {
  /* company name */
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #727e83;
}
.checklistJobTitle {
  font-weight: 700;
  font-size: 12px;
}
.checklistCandidateName {
  font-weight: 400;
  font-size: 12px;
  letter-spacing: normal;
}
.fieldwithBorder {
  padding: 4px;
  border-radius: 4px;
  border: 1px solid #bdbdbd;
  border-color: var(--kendo-color-border, rgba(0, 0, 0, 0.08));
}
.fieldwithBorder:hover {
  border-color: #767676;
}
.headerIcons .mud-icon-button {
  padding: 0 !important;
}
.headerCandidateName h5 {
  margin-bottom: 0px;
}
.header-menu {
  width: 30px;
}

/* Document styles */
.document-host {
    display: flex;
    flex-direction: column;
    /* Make the document area fill the viewport height minus the app header. Adjust the value if your header height differs. */
    height: calc(100vh - 6.5rem);
    min-height: 0; /* allow children to shrink inside flex */
}

    .document-host > * {
        flex: 1 1 auto;
        min-height: 0; /* important for overflow to work in flex children */
    }

/* Target Syncfusion internals from scoped CSS so the rules apply into the third-party component DOM */

::deep(.e-de-container),
::deep(.e-doc-editor-container) {
    height: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* If the toolbar or other child has its own fixed height, ensure the editor area still grows */
::deep(.e-de-container .e-de-documenteditor) {
    height: 100% !important;
}

/* Ensure the document editor content area doesn't create horizontal scroll */
::deep(.e-de-container .e-de-documenteditor),
::deep(.e-de-container .e-de-documenteditor-content),
::deep(.e-de-container .e-documenteditor) {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* Make the document page fit within the container */
::deep(.e-de-container .e-de-documenteditor .e-page-container) {
    width: 100% !important;
    max-width: 100% !important;
}

/* Telerik CheckBox Custom Styling */
/* Override checkbox checked state with blue color */
.k-checkbox:checked,
.k-checkbox.k-checked {
  background-color: var(--evaryst-blue, #0b65b1) !important;
  border-color: var(--evaryst-blue, #0b65b1) !important;
  color: #fff !important;
}

/* Hover state for checked checkbox */
.k-checkbox:checked:hover,
.k-checkbox.k-checked:hover {
  background-color: var(--evaryst-light-blue, #0087fe) !important;
  border-color: var(--evaryst-light-blue, #0087fe) !important;
}

/* Focus state */
.k-checkbox:focus,
.k-checkbox.k-focus {
  box-shadow: 0 0 0 2px rgba(11, 101, 177, 0.3) !important;
}

/* Alternative: Use grey color for checked state */

/*
.k-checkbox:checked,
.k-checkbox.k-checked {
  background-color: #6c757d !important;
  border-color: #6c757d !important;
  color: #fff !important;
}

.k-checkbox:checked:hover,
.k-checkbox.k-checked:hover {
  background-color: #5a6268 !important;
  border-color: #5a6268 !important;
}
*/

.job-level-checkbox-label {
    font-size: 0.875rem;
    font-weight: bold;
}
.custom-label-size .mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined,
.custom-label-size .mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined {
    max-width: 100%;
}

/* CandidateTextBox custom styling */
.evaryst-textbox-wrapper {
    position: relative;
}

.evaryst-textbox-label {
    position: absolute;
    top: -8px;
    left: 10px;
    font-size: 0.75rem;
    background: linear-gradient(to top, white, transparent);
    padding: 0 4px;
    color: #424242;
    z-index: 10;
    pointer-events: none;
}

.evaryst-textbox-input {
    width: 100% !important;
}

.evaryst-textbox-counter {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.75rem;
    color: rgba(0, 0, 0, 0.3);
    line-height: 1;
    pointer-events: none;
    z-index: 1;
    white-space: nowrap;
}

/* WI 2148 — text-based dropdown (EvarystDropDownList) keyboard-highlight fill.
   The auto-highlight-first-item behaviour (WI 2101) drives Telerik's keyboard
   navigation, which marks the active item with .k-focus. The default theme renders
   .k-focus as only an inset border, so as the user typed the first match looked
   outlined rather than highlighted. Give the keyboard-focused item the same primary
   fill the .k-selected state uses, so typing — and arrow navigation — shows the solid
   highlight the design calls for. Popups render detached to <body>, so this lives in
   global CSS scoped to the popup's class rather than the component's scoped sheet. */
.evaryst-textbox-popup .k-list-item.k-focus,
.evaryst-textbox-popup .k-list-item:focus {
    color: var(--kendo-color-on-primary, #ffffff);
    background-color: var(--kendo-color-primary, #ff6358);
    box-shadow: none;
}

.evaryst-textbox-counter.at-limit {
    color: rgba(211, 47, 47, 0.6);
    font-weight: 600;
}

.evaryst-textbox-has-counter input,
.evaryst-textbox-has-counter .k-input-inner {
    padding-right: 52px !important;
}

/* EvarystTextArea specific styling */
.evaryst-textarea-wrapper {
    margin-top: 8px; /* Extra space for the floating label */
}

.evaryst-textarea-input {
    width: 100% !important;
    resize: vertical;
}

.evaryst-textarea-input textarea {
    width: 100% !important;
}

/* Prevent dropdown hover color change */
    .evaryst-textbox-input.k-combobox:hover,
    .evaryst-textbox-input.k-combobox.k-hover {
        background-color: transparent !important;
        color: black !important;
    }

    .evaryst-textbox-input.k-combobox .k-input-inner:hover {
        background-color: transparent !important;
        color: black !important;
    }

    .evaryst-textbox-input.k-combobox .k-button:hover,
    .evaryst-textbox-input.k-combobox .k-select:hover,
    .evaryst-textbox-input.k-combobox .k-input-button:hover {
        background-color: transparent !important;
    }

    /* Match the light border color used by other field wrappers */
    .evaryst-textbox-input.k-combobox {
        border-color: var(--kendo-color-border, rgba(0, 0, 0, 0.08)) !important;
    }
/* Telerik ButtonGroup Custom Styling */
.button-group-custom {
    color: #0087fe !important;
}

.button-group-custom:hover {
    color: #006bb7 !important;
}

.k-button-group .k-button {
    border-color: #dee2e6 !important;
}

.k-checkbox {
    border-color: darkgray !important;
}

/* Small text for textarea */
.text-small {
    font-size: .73rem !important;
}

.text-small textarea,
.text-small .k-input-inner {
    font-size: .73rem !important;
}

/* MudBlazor Snackbar - ensure it appears above modal dialogs */
#mud-snackbar-container {
    z-index: 20000 !important; /* Higher than Telerik modal overlay */
}
.mud-snackbar {
    z-index: 20000 !important;
}

.evaryst-textbox-input,
.evaryst-textbox-input input,
.evaryst-textbox-input .k-input,
.evaryst-textbox-input .k-textbox {
    font-size: clamp(0.55rem, 0.5vw + 0.4rem, var(--kendo-font-size, inherit));
    line-height: var(--kendo-line-height, normal);
    transition: font-size 120ms ease;
}

.evaryst-textbox-label {
  font-size: clamp(0.35rem, 0.3vw + 0.4rem, 0.75rem);
}

.evaryst-checkbox-label {
    font-size: clamp(0.45rem, 0.4vw + 0.3rem, 0.75rem);
    line-height: var(--kendo-line-height, normal);
    white-space: nowrap;
}

.work-prefs-grid {
    display: grid;
    grid-template-columns: 15% 1px auto 1px 9% 8% 1fr 13%;
    /* Rows 1-2 are fixed-height (em-relative) so the tall Career Goals editor,
       which spans all three rows, can't inflate them — otherwise its height is
       distributed across the rows and pushes the left fields apart. The auto row
       3 absorbs the editor's overflow. 10px row-gap matches the Passive Until /
       Willing to Relocate spacing in the right-hand column. */
    grid-template-rows: 2.3em 1.7em auto;
    gap: 10px 16px;
}

.wp-salary   { grid-column: 1; grid-row: 1; align-self: start; }
.wp-sep1     { grid-column: 2; grid-row: 1; background-color: rgba(0,0,0,0.15); align-self: start; height: 28px; }
.wp-ftpt     { grid-column: 3; grid-row: 1; align-self: start; }
.wp-sep2     { grid-column: 4; grid-row: 1; background-color: rgba(0,0,0,0.15); align-self: start; height: 28px; }
.wp-days     { grid-column: 5; grid-row: 1; align-self: start; }
.wp-travel   { grid-column: 6; grid-row: 1; align-self: start; }
.wp-goals    { grid-column: 7; grid-row: 1 / 4; align-self: start; }
.wp-goals .evaryst-textarea-wrapper { margin-top: 0; }
.wp-passive  { grid-column: 8; grid-row: 1 / 4; align-self: start; display: flex; flex-direction: column; gap: 10px; }
.wp-row2     { grid-column: 1 / 7; grid-row: 2; align-self: start; }
.wp-workstatus { grid-column: 1 / 4; grid-row: 3; align-self: start; max-width: 260px; }

/* Explicit override for very small screens */
@media (max-width: 480px) {
  .evaryst-textbox-input,
  .evaryst-textbox-input input,
  .evaryst-textbox-input .k-input {
    font-size: 0.55rem;
  }

  .evaryst-textbox-label {
    font-size: 0.35rem;
  }
}

.k-datepicker,
.k-timepicker,
.k-datepicker .k-input,
.k-timepicker .k-input,
.k-datepicker .k-input-inner,
.k-timepicker .k-input-inner {
    font-size: clamp(0.55rem, 0.5vw + 0.4rem, var(--kendo-font-size, inherit));
    line-height: var(--kendo-line-height, normal);
    transition: font-size 120ms ease;
}

.k-datepicker .k-input-inner::placeholder,
.k-timepicker .k-input-inner::placeholder {
    font-size: clamp(0.55rem, 0.5vw + 0.4rem, var(--kendo-font-size, inherit));
}

@media (max-width: 480px) {
    .k-datepicker,
    .k-timepicker,
    .k-datepicker .k-input,
    .k-timepicker .k-input,
    .k-datepicker .k-input-inner,
    .k-timepicker .k-input-inner {
        font-size: 0.55rem;
    }

.k-datepicker .k-input-inner::placeholder,
.k-timepicker .k-input-inner::placeholder {
    font-size: 0.55rem;
}
}

/* Blazor Reconnection Modal Styles */
#components-reconnect-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
}

#components-reconnect-modal.components-reconnect-hide {
    display: none;
}

.reconnect-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
}

.reconnect-dialog {
    position: relative;
    background: white;
    border-radius: 8px;
    padding: 2rem;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    text-align: center;
    z-index: 1;
}

.reconnect-dialog p {
    margin: 0 0 1.25rem;
    color: #333;
    font-size: 1rem;
}

.reconnect-refresh-btn {
    background-color: var(--evaryst-blue, #0b65b1);
    color: white;
    border: none;
    border-radius: 4px;
    padding: 0.5rem 1.5rem;
    font-size: 1rem;
    cursor: pointer;
}

.reconnect-refresh-btn:hover {
    background-color: var(--evaryst-light-blue, #0087fe);
}

.reconnect-refresh-btn:focus {
    outline: 2px solid var(--evaryst-light-blue, #0087fe);
    outline-offset: 2px;
}

/* Error Fallback Component Styles */
/* Wrapper that takes full width and centers the card */
.error-fallback-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 2rem 1rem;
}

/* The error card itself - styled as a card */
.error-fallback-card {
    width: 50%;
    max-width: 550px;
    min-width: 300px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    text-align: center;
}

.error-fallback-illustration {
    margin-bottom: 1.5rem;
    animation: error-float 3s ease-in-out infinite;
}

@keyframes error-float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
}

.error-fallback-title {
    font-family: "Poppins", sans-serif;
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--evaryst-blue, #0b65b1);
    margin-bottom: 0.75rem;
}

.error-fallback-message {
    font-size: 1rem;
    color: #64748b;
    max-width: 420px;
    margin-bottom: 2rem;
    line-height: 1.6;
}

.error-fallback-details {
    width: 100%;
    max-width: 550px;
    margin-bottom: 1.5rem;
    text-align: left;
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 0;
    overflow: hidden;
}

.error-fallback-details summary {
    cursor: pointer;
    font-weight: 500;
    color: #991b1b;
    padding: 0.75rem 1rem;
    background-color: #fee2e2;
    border-bottom: 1px solid #fecaca;
    -webkit-user-select: none;
    user-select: none;
}

.error-fallback-details summary:hover {
    background-color: #fecaca;
}

.error-fallback-details[open] summary {
    border-radius: 0;
}

.error-fallback-error-type {
    font-family: monospace;
    font-size: 0.75rem;
    font-weight: 600;
    color: #dc2626;
    padding: 0.5rem 1rem 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.error-fallback-details pre {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.8rem;
    color: #b91c1c;
    white-space: pre-wrap;
    word-break: break-word;
    padding: 0.5rem 1rem;
    margin: 0;
    max-height: 150px;
    overflow-y: auto;
    background-color: transparent;
}

.error-fallback-stack {
    color: #6b7280 !important;
    font-size: 0.7rem !important;
    border-top: 1px dashed #fecaca;
    padding-top: 0.5rem !important;
    margin-top: 0.5rem !important;
}

.error-fallback-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.error-fallback-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 2rem;
    font-family: "Poppins", sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.error-fallback-button:active {
    transform: scale(0.98);
}

.error-fallback-button.primary {
    background: linear-gradient(135deg, var(--evaryst-blue, #0b65b1) 0%, var(--evaryst-light-blue, #0087fe) 100%);
    color: white;
}

.error-fallback-button.primary:hover {
    box-shadow: 0 4px 12px rgba(11, 101, 177, 0.4);
    transform: translateY(-1px);
}

.error-fallback-button.secondary {
    background-color: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.error-fallback-button.secondary:hover {
    background-color: #e2e8f0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.error-fallback-button svg {
    width: 16px;
    height: 16px;
}

/* Telerik button styling for error fallback */
.error-fallback-telerik-button {
    padding: 0.875rem 2rem !important;
    font-family: "Poppins", sans-serif !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    border-radius: 8px !important;
}

.error-fallback-telerik-button.k-button-solid-primary {
    background: linear-gradient(135deg, var(--evaryst-blue, #0b65b1) 0%, var(--evaryst-light-blue, #0087fe) 100%) !important;
    border: none !important;
}

.error-fallback-telerik-button.k-button-solid-primary:hover {
    box-shadow: 0 4px 12px rgba(11, 101, 177, 0.4) !important;
}

.error-fallback-hint {
    font-size: 0.8rem;
    color: #94a3b8;
    margin: 0;
}

/* Telerik Grid - Show sort indicator hint on sortable columns */
.k-grid-header .k-header {
    position: relative;
}

/* ===========================================
   EvarystGrid Sort Icons - Custom Styling
   =========================================== */

/* Hide Telerik's default sort icons on EvarystGrid */
.evaryst-grid .k-sort-icon,
.evaryst-grid .k-sort-order,
.evaryst-grid .k-i-sort-asc-sm,
.evaryst-grid .k-i-sort-desc-sm,
.evaryst-grid .k-svg-i-sort-asc-small,
.evaryst-grid .k-svg-i-sort-desc-small,
.evaryst-grid .k-grid-header .k-icon:not(.k-svg-i-filter):not(.k-i-filter),
.evaryst-grid .k-grid-header .k-svg-icon:not(.k-svg-i-filter),
.evaryst-grid .k-grid-header .k-sort-indicator,
.evaryst-grid .k-header .k-sort-icon,
.evaryst-grid .k-header .k-svg-icon:not(.k-svg-i-filter) {
    display: none !important;
    visibility: hidden !important;
}

/* Unsorted state - Show dual arrows ONLY on EvarystGrid sortable columns */
.evaryst-grid .k-grid-header .k-header:not(.k-sorted):not(.non-sortable) .k-link::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    right: 8px;
    top: 50%;
    margin-top: 2px;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 4px solid #999;
    opacity: 0.6;
    pointer-events: none;
}

.evaryst-grid .k-grid-header .k-header:not(.k-sorted):not(.non-sortable) .k-link::before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    right: 8px;
    top: 50%;
    margin-top: -6px;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-bottom: 4px solid #999;
    opacity: 0.6;
    pointer-events: none;
}

/* Increase opacity on hover for better visibility */
.evaryst-grid .k-grid-header .k-header:not(.k-sorted):not(.non-sortable):hover .k-link::after,
.evaryst-grid .k-grid-header .k-header:not(.k-sorted):not(.non-sortable):hover .k-link::before {
    opacity: 0.9;
}

/* Sorted ascending - Single up arrow with full opacity */
.evaryst-grid .k-grid-header .k-header[aria-sort="ascending"] .k-link::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    right: 8px;
    top: 50%;
    margin-top: -3px;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-bottom: 4px solid #999;
    opacity: 1.0;
    pointer-events: none;
}

/* Sorted descending - Single down arrow with full opacity */
.evaryst-grid .k-grid-header .k-header[aria-sort="descending"] .k-link::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    right: 8px;
    top: 50%;
    margin-top: 2px;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 4px solid #999;
    opacity: 1.0;
    pointer-events: none;
}

/* ===========================================
   EvarystNotificationState Component Styles
   =========================================== */
.evaryst-notification-state-container {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 9999;
    min-width: 300px;
    max-width: 400px;
    animation: evaryst-notification-slide-in 0.3s ease-out;
}

@keyframes evaryst-notification-slide-in {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.evaryst-notification-state {
    border: 1px solid;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.evaryst-notification-state--error {
    background-color: #fdecea;
    border-color: #f5c2c7;
    color: #842029;
}

.evaryst-notification-state--error .k-svg-icon {
    color: #dc3545;
}

.evaryst-notification-state--warning {
    background-color: #fff3cd;
    border-color: #ffecb5;
    color: #664d03;
}

.evaryst-notification-state--warning .k-svg-icon {
    color: #ffc107;
}

.evaryst-notification-state--info {
    background-color: #cff4fc;
    border-color: #b6effb;
    color: #055160;
}

.evaryst-notification-state--info .k-svg-icon {
    color: #0dcaf0;
}

.evaryst-notification-state--success {
    background-color: #d1e7dd;
    border-color: #badbcc;
    color: #0f5132;
}

.evaryst-notification-state--success .k-svg-icon {
    color: #198754;
}

.evaryst-notification-state__button {
    white-space: nowrap;
}

.evaryst-notification-state__dismiss {
    padding: 0.25rem !important;
    min-width: auto !important;
}

/* Company/Jobs Telerik Context Menu - scrollable submenus */
.company-jobs-context-menu.k-menu-popup,
.company-jobs-context-menu .k-menu-group,
.k-menu-popup .k-menu-group {
    max-height: 50vh !important;
    overflow-y: auto !important;
}

/* Candidates in process component styles */
.loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    gap: 16px;
}

.loading-text {
    color: #666;
    font-size: 0.9em;
}

.candidates-in-process-container {
    overflow-y: auto;
}

.company-group {
    margin-bottom: 16px;
}

.company-header {
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    color: #0d1e25;
    margin-bottom: 8px;
}

.job-group {
    margin-left: 16px;
}

.job-title {
}

.status-group {
    margin-left: 16px;
}

.status-name {
    font-size: 0.875rem;
    color: #666;
}

.candidates-grid {
    margin-left: 8px;
}

/* Change View Button - Green */
.change-view-button.k-button {
    background-color: #198754;
    border-color: #198754;
    color: white;
}

    .change-view-button.k-button:hover {
        background-color: #157347;
        border-color: #146c43;
    }

    .change-view-button.k-button:focus,
    .change-view-button.k-button:active {
        background-color: #146c43;
        border-color: #13653f;
    }

/* Remove grid wrapper borders and background */
.candidates-grid.k-grid {
    border: none;
    box-shadow: none;
    background-color: transparent !important;
}

/* Hide grid chrome */
.candidates-grid .k-grid-header {
    display: none !important;
}

.candidates-grid .k-grid-container {
    border: none;
    background-color: transparent !important;
    padding: 0 !important;
}

.candidates-grid .k-grid-content {
    border: none;
    background-color: transparent !important;
    padding: 0 !important;
    overflow: visible !important;
}

.candidates-grid table {
    border: none;
    border-collapse: collapse;
    background-color: transparent !important;
}

.candidates-grid .k-table-tbody,
.candidates-grid tbody {
    border: none;
    background-color: transparent !important;
}

    /* Remove all cell borders and backgrounds - remove cursor pointer since rows are not clickable */
    .candidates-grid tbody tr {
        cursor: default;
        border: none !important;
        background: transparent !important;
        background-color: transparent !important;
    }

    .candidates-grid tbody td {
        border: none !important;
        border-top: none !important;
        border-bottom: none !important;
        background: transparent !important;
        background-color: transparent !important;
        padding: 0px 8px !important;
        line-height: 1.2 !important;
        height: auto !important;
        min-height: 0 !important;
    }

    /* Remove alternating row colors */
    .candidates-grid .k-table-tbody .k-table-row:nth-child(odd),
    .candidates-grid tbody tr:nth-child(odd) {
        background: transparent !important;
        background-color: transparent !important;
    }

    .candidates-grid .k-table-tbody .k-table-row:nth-child(even),
    .candidates-grid tbody tr:nth-child(even) {
        background: transparent !important;
        background-color: transparent !important;
    }

.candidates-grid .k-table-row,
.candidates-grid .k-master-row {
    background: transparent !important;
    background-color: transparent !important;
}

    /* Hover effect */
    .candidates-grid tbody tr:hover,
    .candidates-grid .k-table-row:hover {
        background-color: #f5f5f5 !important;
    }

/* Reduce spacing in candidate name cells */
.candidates-grid .checklistCandidateName {
    line-height: 1.2;
    padding: 0;
    margin: 0;
}

/* Hide sort indicators/arrows - ultra comprehensive approach */
.candidates-grid .k-sort-icon,
.candidates-grid .k-sort-order,
.candidates-grid .k-icon:not(.k-svg-i-filter):not(.k-i-filter),
.candidates-grid .k-svg-icon:not(.k-svg-i-filter),
.candidates-grid .k-i-sort-asc-sm,
.candidates-grid .k-i-sort-desc-sm,
.candidates-grid th .k-link .k-icon:not(.k-svg-i-filter):not(.k-i-filter),
.candidates-grid th .k-icon-wrapper,
.candidates-grid .k-column-title .k-icon:not(.k-svg-i-filter):not(.k-i-filter),
.candidates-grid .k-sort-indicator,
.candidates-grid .k-grid-header .k-icon:not(.k-svg-i-filter):not(.k-i-filter),
.candidates-grid .k-grid-header .k-svg-icon:not(.k-svg-i-filter) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Hide pseudo-elements that might contain arrows */
.candidates-grid *::before,
.candidates-grid *::after {
    content: none !important;
}

/* Aggressive targeting of all potential arrow containers */
.candidates-grid [class*="sort"],
.candidates-grid [class*="icon"] {
    display: none !important;
}

/* Remove any SVG elements that might be arrows */
.candidates-grid svg {
    display: none !important;
}

.error-message {
    color: #d32f2f;
    padding: 16px;
    text-align: center;
}

/* Interview Form Component Styles */
.interview-form-container {
    display: flex;
}

.interview-form-left {
    flex: 0 0 60%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.interview-form-right {
    flex: 0 0 40%;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.resume-viewer {
    flex: 1;
    min-height: 0;
    overflow: auto;
    border: 1px solid var(--divider-color, #eaeaea);
    border-radius: 4px;
    background-color: #fff;
    overflow-y: auto; /* or scroll */
    overscroll-behavior: contain;
}

/* WI 2157: wrapper around the persistent View Profiles resume viewer so the document-host fills
   the resume-viewer area. Hidden via .d-none (not unmounted) when a candidate has no resume. */
.resume-viewer-persistent {
    height: 100%;
}

.no-resume-message {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 3rem 1rem;
    text-align: center;
}

.no-resume-message p {
    color: #666;
    font-size: 1rem;
    margin: 0;
}

.jobs-section,
.notes-section {
    flex-shrink: 0;
}

.interview-form-textarea {
    width: 100%;
    max-height: 400px;
    overflow-y: auto;
}

/* Ensure Document component renders properly within the interview form */
.interview-form-left .document-host {
    height: 100%;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 1200px) {
    .interview-form-container {
        flex-direction: column;
        height: auto;
    }

    .interview-form-left,
    .interview-form-right {
        flex: 1 1 auto;
    }

    .interview-form-left {
        min-height: 500px;
    }
}

/* Blazor Error UI - hide and prevent click interception
   Use !important to override inline styles set by Blazor's JS error handler
   pointer-events: none ensures it never blocks clicks even if display changes */
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none !important;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    pointer-events: none !important;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* Job Candidates grid - selected row styling */
.job-candidates-grid .k-selected,
.job-candidates-grid .k-selected > td,
.job-candidates-grid .k-table-row.k-selected,
.job-candidates-grid .k-table-row.k-selected > .k-table-td,
.job-candidates-grid tr.k-selected,
.job-candidates-grid tr.k-selected > td {
    background-color: rgba(0, 69, 129, 0.1) !important;
    color: inherit !important;
}

.job-candidates-grid .k-selected:hover,
.job-candidates-grid .k-selected:hover > td,
.job-candidates-grid .k-table-row.k-selected:hover,
.job-candidates-grid .k-table-row.k-selected:hover > .k-table-td,
.job-candidates-grid tr.k-selected:hover,
.job-candidates-grid tr.k-selected:hover > td {
    background-color: rgba(0, 69, 129, 0.15) !important;
    color: inherit !important;
}

/* Job Candidates grid - spacing between filter and sort icons */
.job-candidates-grid .k-grid-filter-menu,
.job-candidates-grid .k-grid-header-menu,
.job-candidates-grid .k-header .k-grid-filter-menu {
    position: relative;
    right: 1.5rem;
}

.job-candidates-grid .favorite-col-header .k-grid-filter-menu,
.job-candidates-grid .favorite-col-header .k-grid-header-menu {
    right: 0;
}

.job-candidates-grid td:nth-child(2) {
    text-align: center;
}

.job-candidates-grid .k-grid-toolbar {
    padding: 0.125rem 0.5rem;
    min-height: unset;
}

/* Limit height of filter menu checkbox lists to prevent overly tall popups */
.k-popup .k-multicheck-wrap,
.k-filter-menu .k-multicheck-wrap,
.k-filter-menu-container .k-multicheck-wrap {
    max-height: 150px;
    overflow-y: auto;
}

/* Force Telerik tooltips to use light background regardless of OS dark mode */
.k-tooltip {
    background-color: #fff !important;
    color: #333 !important;
    border: 1px solid #e0e0e0 !important;
}

.k-callout {
    color: #fff !important;
}

/* Hide the expand arrow on the user profile menu */
.user-profile-menu .k-menu-expand-arrow {
    display: none;
}

/* EvarystWindow — viewport-constrained modal with pinned title/actions */
.evaryst-window {
    max-height: calc(100vh - 2rem);
    display: flex;
    flex-direction: column;
}

.evaryst-window .k-window-content {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.evaryst-window-scroll {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding: 1rem;
}

.evaryst-window-actions {
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--bs-border-color, #dee2e6);
}

/* Navigation state restore banner */
.navigation-restore-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: var(--evaryst-surface);
    border: 1px solid var(--evaryst-border);
    border-radius: 6px;
}