@charset "utf-8";

/* ****************************************
// Copyright:           Titan-Techs.
// Location:            Newtown, PA, USA
// Solution:            Subscription
// Project:             Subscription.Server
// File Name:           styles.css
// Created By:          Narendra Kumaran Kadhirvelu, Jolly Joseph Paily, DonBosco Paily, Mariappan Raja, Gowtham Selvaraj, Pankaj Sahu, Brijesh Dubey
// Summary:             Global styles for Subscription application
// **************************************** */

@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

/* #region Global Variables */
/*
   These variables were extracted from material3-lite.css (Syncfusion Theme Studio output)
   to enable using the CDN version of the Material 3 theme while retaining custom colors.
*/
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --color-sf-black: 0, 0, 0;
    --color-sf-white: 255, 255, 255;
    --color-sf-primary: 142, 24, 27;
    --color-sf-primary-container: 234, 221, 255;
    --color-sf-secondary: 254, 193, 15;
    --color-sf-secondary-container: 232, 222, 248;
    --color-sf-tertiary: 125, 82, 96;
    --color-sf-tertiary-container: 255, 216, 228;
    --color-sf-surface: 254, 253, 255;
    --color-sf-surface-variant: 231, 224, 236;
    --color-sf-background: var(--color-sf-surface);
    --color-sf-on-primary: 255, 255, 255;
    --color-sf-on-primary-container: 33, 0, 94;
    --color-sf-on-secondary: 63, 63, 63;
    --color-sf-on-secondary-container: 30, 25, 43;
    --color-sf-on-tertiary: 255, 255, 255;
    --color-sf-on-tertiary-containe: 55, 11, 30;
    --color-sf-on-surface: 20, 26, 36; /* UI refresh: neutral ink #141A24 (was maroon 142,24,27) — text is brand-independent; brand lives in accents */
    --color-sf-on-surface-variant: 73, 69, 78;
    --color-sf-on-background: 28, 27, 31;
    --color-sf-outline: 57, 52, 62;
    --color-sf-outline-variant: 226, 232, 240; /* UI refresh: neutral hairline #E2E8F0 (was teal 32,201,151 — leaked teal borders e.g. around the PDF viewer) */
    --color-sf-shadow: 0, 0, 0;
    --color-sf-surface-tint-color: 103, 80, 164;
    --color-sf-inverse-surface: 49, 48, 51;
    --color-sf-inverse-on-surface: 244, 239, 244;
    --color-sf-inverse-primary: 208, 188, 255;
    --color-sf-scrim: 0, 0, 0;
    --color-sf-error: 179, 38, 30;
    --color-sf-error-container: 249, 222, 220;
    --color-sf-on-error: 255, 250, 250;
    --color-sf-on-error-container: 65, 14, 11;
    --color-sf-success: 32, 81, 7;
    --color-sf-success-container: 209, 255, 186;
    --color-sf-on-success: 244, 255, 239;
    --color-sf-on-success-container: 13, 39, 0;
    --color-sf-info: 1, 87, 155;
    --color-sf-info-container: 233, 245, 255;
    --color-sf-on-info: 250, 253, 255;
    --color-sf-on-info-container: 0, 51, 91;
    --color-sf-warning: 145, 76, 0;
    --color-sf-warning-container: 254, 236, 222;
    --color-sf-on-warning: 255, 255, 255;
    --color-sf-on-warning-container: 47, 21, 0;
    --color-sf-spreadsheet-gridline: var(--color-sf-surface-variant);
    --color-sf-shadow-focus-ring1: 0 0 0 1px rgb(255, 255, 255), 0 0 0 3px rgb(0, 0, 0);
    --color-sf-diagram-palette-background: --color-sf-white;
    --color-sf-success-text: 255, 255, 255;
    --color-sf-warning-text: 255, 255, 255;
    --color-sf-danger-text: 255, 255, 255;
    --color-sf-info-text: 255, 255, 255;
    --color-sf-content-text-color-alt2: var(--color-sf-on-secondary);
    --color-sf-secondary-bg-color: var(--color-sf-surface);
    --font-size: 10pt;
    --font-size-med: 9pt;
    --font-size-small: 8pt;
    --font-icon: 'icofont';
    --font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", sans-serif;
    --e-font-name: "Segoe UI", -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", sans-serif;
}

/* #endregion Global Variables */

/* #region External Font */

@font-face {
    font-family: 'icofont';
    font-style: normal;
    font-weight: normal;
    src: url('fonts/icofont.woff') format('woff');
}

/* #endregion External Font */

/* #region Scroll Bars */
@view-transition {
    navigation: auto;
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: rgba(var(--color-sf-secondary)) !important;
    border-radius: 10px;
}

/* Handle */

::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 6px #000000 !important;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5) !important;
    background: var(--color-sf-primary) !important;
    border: none !important;
    border-radius: 10px;
}

/* Handle on hover */

::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--color-sf-secondary)) !important;
}


/* #endregion Scroll Bars */

/* #region Body, Form, HTML */

body, form, html {
    margin: 0;
    overflow: hidden;
    font-family: var(--font-family);
    scrollbar-color: rgba(var(--color-sf-secondary)) rgba(var(--color-sf-primary));
}

/* Push the app font onto Syncfusion components (material3 hard-sets Roboto on .e-control text). EXCLUDE icon
   elements so the glyph fonts survive: "icon" covers e-icons/e-btn-icon/e-input-group-icon; "icofont" covers
   the IcoFont set (no "icon" substring); .e-chips-close is an e-icons × whose class also lacks "icon".
   EXCLUDING here (rather than re-asserting e-icons in a separate rule) lets material3's own icon font apply and
   sidesteps a specificity fight — this :not() chain is (0,3+,0) and would out-specify a lone .e-chips-close
   rule. If another glyph shows as a box, add its class to the :not() list below. */
.e-control,
.e-control :not([class*="icon"]):not([class*="icofont"]):not(.e-chips-close) {
    font-family: var(--font-family) !important;
}

::-webkit-input-placeholder, ::placeholder {
    color: rgb(170, 51, 0);
}

/* #endregion Body, Form, HTML */

/* #region General Classes */
.upper {
    text-transform: uppercase;
}

.upper input {
    text-transform: uppercase;
}

.appHeader {
    font-size: x-large;
    font-weight: bold;
    margin-left: 20px;
}

#divMainGrid {
    border: 1px solid rgb(204, 204, 204);
    border-radius: 5px;
    height: calc(97vh - 60px);
    margin: 15px;
    width: calc(100vw - 95px);
}

#divMainGrid > #divHeader {
    height: 50px;
    padding-left: 10px;
    padding-right: 10px;
}

.e-tab .e-tab-header .e-toolbar-item .e-tab-text {
    font-size: 12px;
}

#divMainGrid > #divGrid {
    height: calc(100% - 100px);
    /*border: 1px solid red;*/
}

#divMainGrid > #divAdminGrid {
    height: calc(100% - 49px);
    /*border: 1px solid red;*/
}

#divMainGrid > #divFooter {
    height: 50px;
    background: linear-gradient(120deg, rgb(var(--color-sf-primary), 0.13), rgb(var(--color-sf-secondary), 0.40));
}

.layout-2 {
    display: flex;
    height: calc(100% - 20px);
    padding-bottom: 10px;
    padding-top: 10px;
    width: 99%;
}

.leftLayout, .rightLayout {
    flex: 1;
    height: 100%;
    margin-left: 0.75%;
    overflow-y: auto;
    vertical-align: top;
    /*width: 48.0%;*/
}

.divPanelContainer {
    align-items: start;
    display: flex;
    flex-direction: row;
    margin-bottom: 18px;
}

.divPanelContainerVertical {
    align-items: start;
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
}

.companyPanel {
    height: calc(100% - 20px);
}

.leftLayout {
    border-right: 1px solid var(--c-grayDF);
}

.spanLeftLabel {
    flex: 0 0 150px;
    font-weight: bold;
    min-width: 150px;
}

.spanRightText {
    flex: 1;
}

.spanTop {
    font-weight: bold;
    margin-bottom: 12px;
    width: 100%;
}

.spanBottom {
    display: block;
    flex-grow: 1;
    height: calc(100% - 40px);
    overflow-y: auto;
    width: 100%;
}

.gridNotes {
    border: 1px solid var(--c-grayCF);
    color: rgb(0, 0, 0);
    font-style: italic;
    margin-left: 15px;
    min-height: 40px;
    padding: 5px;
    width: 95%;
}

.blankGridNotes {
    line-height: 40px;
}

.textGridNotes {
    line-height: 25px;
}

.noAccess {
    color: var(--c-red);
    font-weight: bold;
    font-size: xx-large;
    margin-top: 40px;
    width: 100%;
    text-align: center;
}

.skillContainerBox {
    display: grid;
    grid-template-columns: minmax(330px, 40%) 1fr;
    /* Definite, relative row so children's % / calc heights resolve against a real track instead of
       an implicit `auto` one (which collapses % to auto and lets content overflow). minmax(0,1fr)
       fills the box at any total height AND can shrink below content so the panes scroll, not spill. */
    grid-template-rows: minmax(0, 1fr);
    gap: 10px; /* margin between the two divs */
    height: calc(100% - 20px);
}

.resumeContainerBox {
    display: grid;
    grid-template-rows: 40px 1fr;
    /* gap: 10px; margin between the two divs */
    height: calc(100% - 20px);
}

.leftContent {
    margin: 10px 0 10px 10px;
    height: 100%;
    min-height: 0; /* grid item: allow shrink below content so the inner panes scroll, not overflow */
    /*background-color: #f0f0f0;  Just for visual reference */
}

.rightContent {
    margin: 10px 0 10px 10px;
    height: calc(100% - 35px);
    min-height: 0; /* grid item: allow shrink below content so the inner panes scroll, not overflow */
    /*background-color: #d0d0d0;  Just for visual reference */
}

.rightMargin {
    margin-right: 15px;
    margin-left: 10px;
}
/* #endregion General Classes */

.point {
    cursor: pointer;
}

/* #region Login Page */

.grid-container {
    border: 1px solid rgb(221, 221, 221);
    display: grid;
    grid-template-rows: 50px 20px 50px 50px 50px 50px;
    grid-template-columns: 30% auto;
    border-radius: 5px;
    box-shadow: 3px 3px 7px rgb(153, 153, 153);
    font-family: var(--font-family);
    margin: 75px auto;
    width: 400px;
}

.header, .footer {
    grid-column: 1 / span 2;
    background-color: var(--c-red);
    color: rgb(255, 255, 255);
    font-size: 20pt;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
}

.header {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    padding: 10px;
}

.footer {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.left {
    grid-column: 1;
    max-width: 110px;
    padding-left: 10px;
}

.left label {
    font-size: 11pt;
    font-weight: bold;
    line-height: 30px;
}

.e-hidden {
    display: none;
}

.right {
    grid-column: 2;
    width: 100%;
}

.grid-container .e-btn.e-primary, .grid-container .e-css.e-btn.e-primary {
    background: #3f3f3f;
    border-color: #3f3f3f;
    color: #ffffff;
}

.grid-container .e-btn.e-primary:hover, .grid-container .e-css.e-btn.e-primary:hover {
    background: rgb(var(--color-sf-primary));
    border-color: rgb(var(--color-sf-primary));
    color: rgb(var(--color-sf-on-primary));
}
/* #endregion Login Page*/

.truncate-text {
    display: inline-block;
    max-width: 100%; /* or set a fixed width like 150px */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    vertical-align: bottom;
}

/* DASHBOARD */
.activity-detail {
    padding: 15px;
    background-color: rgb(248, 249, 250);
    border-left: 4px solid rgb(102, 126, 234);
    margin: 10px;
}

.activity-detail-header {
    margin-bottom: 10px;
    color: rgb(51, 51, 51);
    font-size: 14px;
}

.activity-detail-content {
    color: rgb(102, 102, 102);
    font-size: 13px;
    line-height: 1.5;
    white-space: pre-wrap;
}

.dashboard-container {
    width: 100%;
    min-height: 100vh;
    background-color: rgb(248, 249, 250);
    position: relative;
}

.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    flex-direction: column;
}

.loading-text {
    margin-top: 20px;
    font-size: 16px;
    color: rgb(102, 102, 102);
    font-weight: 500;
}

.dashboard-header {
    background: linear-gradient(135deg, rgb(102, 126, 234) 0%, rgb(118, 75, 162) 100%);
    color: rgb(255, 255, 255);
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.dashboard-title h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
}

.user-badge {
    background-color: rgba(255, 255, 255, 0.2);
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 14px;
    margin-top: 5px;
    display: inline-block;
}

.dashboard-controls {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.control-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.control-label {
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
}

.refresh-btn {
    height: 36px;
    margin-top: 20px;
}

.dashboard-content {
    padding: 20px;
    height: calc(100vh - 200px);
    overflow-y: auto;
    overflow-x: hidden;
}

.kpi-section {
    margin-bottom: 30px;
}

.section-title {
    margin-bottom: 15px;
}

.section-title h3 {
    color: rgb(51, 51, 51);
    font-size: 20px;
    font-weight: 600;
    margin: 0;
}

.kpi-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.kpi-card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.kpi-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.kpi-content {
    display: flex;
    align-items: center;
    padding: 10px;
}

.kpi-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: rgb(255, 255, 255);
    margin-right: 15px;
}

.requisitions-card .kpi-icon {
    background: linear-gradient(135deg, rgb(79, 129, 189), rgb(91, 155, 213));
}

.active-card .kpi-icon {
    background: linear-gradient(135deg, rgb(247, 150, 70), rgb(251, 176, 64));
}

.interview-card .kpi-icon {
    background: linear-gradient(135deg, rgb(156, 187, 88), rgb(169, 204, 90));
}

.offers-card .kpi-icon {
    background: linear-gradient(135deg, rgb(128, 100, 162), rgb(149, 117, 184));
}

.hired-card .kpi-icon {
    background: linear-gradient(135deg, rgb(75, 172, 198), rgb(79, 179, 212));
}

.ratio-card .kpi-icon {
    background: linear-gradient(135deg, rgb(241, 90, 36), rgb(242, 108, 79));
}

.kpi-details {
    flex: 1;
}

.kpi-value {
    font-size: 28px;
    font-weight: 700;
    color: rgb(51, 51, 51);
    line-height: 1;
}

.kpi-label {
    font-size: 14px;
    color: rgb(102, 102, 102);
    margin-top: 5px;
    font-weight: 500;
}

.charts-section {
    margin-bottom: 30px;
}

.charts-row {
    display: grid;
    gap: 20px;
    margin-bottom: 20px;
}

.chart-container {
    background: rgb(255, 255, 255);
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.chart-title {
    font-size: 18px;
    font-weight: 600;
    color: rgb(51, 51, 51);
    margin-bottom: 15px;
    padding: 20px 20px 0 20px;
}

.chart-wrapper {
    width: 100%;
    padding: 0 20px 20px 20px;
    overflow: hidden;
}

.chart-wrapper .e-chart,
.chart-wrapper .e-chart svg {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
}

.chart-container .e-control.e-chart {
    width: 100% !important;
}

.summary-section, .activity-section {
    margin-bottom: 30px;
}

.summary-section .e-card, .activity-section .e-card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.activity-section .e-tab .e-content .e-item {
    padding: 15px;
}

.activity-section .e-tab .e-tab-header .e-toolbar-item.e-active {
    background-color: rgb(255, 255, 255);
    border-bottom: 2px solid rgb(102, 126, 234);
}

@media (max-width: 768px) {
    .header-content {
        flex-direction: column;
        align-items: stretch;
    }

    .dashboard-controls {
        justify-content: center;
    }

    .kpi-cards {
        grid-template-columns: 1fr;
    }

    .dashboard-content {
        padding: 15px;
    }
}


/* #region Timeline */
.timeline-container {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.custom-timeline .e-timeline-dot-item .e-dot {
    background-color: var(--c-red, rgb(142, 24, 27)) !important;
    border-color: var(--c-red, rgb(142, 24, 27)) !important;
}

.custom-timeline .e-timeline-dot-item .e-dot::before {
    background-color: var(--c-red, rgb(142, 24, 27)) !important;
}

.custom-timeline ol {
    height: 95%;
}

.custom-timeline ol li {
    min-height: 100px;
}

.timeline-content {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 0 0;
}

.timeline-date {
    min-width: 130px;
    font-weight: bold;
    color: rgb(102, 102, 102);
    font-size: 12px;
    text-align: right;
    padding-top: 2px;
}

.timeline-details {
    flex: 1;
    line-height: 1.4;
}

.timeline-title {
    margin-bottom: 5px;
    font-size: 14px;
}

.requisition-name {
    color: rgb(102, 102, 102);
    font-size: 13px;
}

.timeline-status {
    margin-bottom: 5px;
}

.status-badge {
    background-color: var(--c-red, rgb(142, 24, 27));
    color: rgb(255, 255, 255);
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
}

.timeline-creator {
    margin-bottom: 5px;
    font-size: 12px;
    color: rgb(102, 102, 102);
}

.timeline-notes {
    margin-bottom: 5px;
    font-size: 12px;
    color: rgb(51, 51, 51);
    background-color: rgb(245, 245, 245);
    padding: 5px 8px;
    border-radius: 4px;
    border-left: 3px solid var(--c-red, rgb(142, 24, 27));
}

.timeline-interview {
    margin-top: 8px;
    padding: 8px;
    background-color: rgb(255, 248, 225);
    border-radius: 4px;
    border: 1px solid rgb(255, 224, 130);
}

.interview-time,
.interview-phone,
.interview-details {
    margin-bottom: 3px;
    font-size: 12px;
}

.interview-details {
    margin-bottom: 0;
}

.no-data {
    text-align: center;
    padding: 50px;
    color: rgb(102, 102, 102);
}

/* Match Analysis ("why this fit") popup — adjustable spacing/typography */
.matchAnalysisDialog .maBody {
    line-height: 1.5em;
    padding: 4px 6px;
}

.matchAnalysisDialog .maBody div,
.matchAnalysisDialog .maBody p,
.matchAnalysisDialog .maBody li {
    line-height: 1.5em;
}

.matchAnalysisDialog .maTitle {
    text-align: center;
    font-weight: bold;
    margin: 0 0 6px 0;
}

.matchAnalysisDialog .maScore {
    text-align: center;
    font-weight: bold;
    margin: 0 0 8px 0;
}

/* gap between sections (also the 20px between the Summary/Headline and Strength) — adjust here */
.matchAnalysisDialog .maSection {
    margin-top: 20px;
}

.matchAnalysisDialog .maLabel {
    font-weight: bold;
    text-transform: uppercase;
}

.matchAnalysisDialog .maText {
    margin-top: 2px;
}

.matchAnalysisDialog .maBody ul,
.matchAnalysisDialog .maBody ol {
    margin: 4px 0 0 0;
    padding-left: 22px;
}

.matchAnalysisDialog .maBody li {
    margin-bottom: 4px;
}

.matchAnalysisDialog .maError {
    text-align: center;
    padding: 30px;
    color: rgb(102, 102, 102);
}

.matchAnalysisDialog .maLoading {
    text-align: center;
    padding: 30px;
}

/* Footer band — match the confirm/alert dialog footer (cream); flush to the dialog bottom (no gap/white strip) */
.matchAnalysisDialog .e-footer-content {
    background: rgb(var(--color-sf-secondary), 0.2);
    padding: 12px 24px;
    margin: 0;
    text-align: right;
}

/* remove the white strip below the footer / between content and footer */
.matchAnalysisDialog .e-dlg-content {
    margin-bottom: 0;
    padding-bottom: 0;
}

/* ---- Standard dialog footer (opt-in: add `stdFooter` to a dialogPopup's CssClass) ----
   Replaces the old absolute-positioned FormButtons jugaad (.e-button-right + the 105px content
   reservation in material-syncfusion-overrides.css) with a real DialogTemplates <FooterTemplate>.
   Used together with an EMPTY <FormButtons></FormButtons> (suppresses SfDataForm's default Submit)
   and a footer Search button carrying type="submit" form="<SfDataForm Id>". */
.dialogPopup.stdFooter .e-dlg-content {
    max-height: none; /* drop the 105px reservation; the real footer is a flex sibling now */
}

.dialogPopup.stdFooter .e-button-right {
    display: none; /* hide the empty default FormButtons container left by the empty FormButtons */
}

.dialogPopup.stdFooter .e-footer-content {
    background: linear-gradient(120deg, rgb(var(--color-sf-primary), 0.13), rgb(var(--color-sf-secondary), 0.40));
    text-align: right;
    padding: 14px 24px;
    margin: 0;
}

/* Override the Material3 (CDN material3.css) red inset focus indicator on grid cells — it paints a noisy
   1px primary box-shadow on whatever cell is clicked/focused. Cell/row SELECTION styling is separate and
   stays intact. !important so it wins over the CDN rule regardless of stylesheet load order. */
.e-grid.sf-grid :is(.e-headercell, .e-rowcell, .e-groupcaption, .e-recordplusexpand, .e-recordpluscollapse,
                    .e-detailrowcollapse, .e-detailrowexpand, .e-detailcell, .e-rowdragheader):is(:focus, :focus-visible) {
    box-shadow: none !important;
}

/* Refresh icon embedded in the Matches tab header (desktop-app "button on the tab" style),
   replacing the old separate Refresh bar. The span carries @onclick:stopPropagation so it refreshes
   without toggling the tab selection. */
.matchTabLabel {
    vertical-align: middle;
}

/* Action icons inside a tab HeaderTemplate — the Matches refresh (.matchTabRefresh) and the
   in-context action buttons (.tabActionIcon) on the list/Basic Info tabs. Rendered as small
   round icon-buttons: a subtle ring at rest, theme-primary fill on hover. */
.matchTabRefresh,
.tabActionIcon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: 6px;
    border: 1px solid rgba(0, 0, 0, 0.35);
    border-radius: 50%;
    color: rgba(0, 0, 0, 0.55);
    line-height: 1;
    vertical-align: middle;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.e-pager.sf-pager .e-numericcontainer a {
    font-size: 12px;
}

.e-pager .e-spacing, .e-pager .e-numericitem:hover, .e-pager .e-currentitem {
    padding: 4px 2px;
}

.e-pager .e-numericitem {
    min-width: 30px !important;
}

.e-pager .e-dropdownbase .e-list-item {
    font-size: 12px !important;
}

/* Normalize glyph size inside the button (mpc's speeddial-icon base forces 16px !important —
   beat it with the extra .e-tab class specificity, since styles.css loads before the overrides). */
.e-tab .matchTabRefresh,
.e-tab .tabActionIcon {
    font-size: 11px !important;
}

.e-grid .e-rowcell {
    font-size: 12.5px;
    line-height: 18px;
    padding: 5px 5px;
}

.e-tab .e-content .e-item {
    font-size: 12.5px;
}

.e-pager.sf-pager .e-pagercontainer .e-first, .e-pager.sf-pager .e-pagercontainer .e-prev, .e-pager.sf-pager .e-pagercontainer .e-next, .e-pager.sf-pager .e-pagercontainer .e-last {
    font-size: 12px;
}

.matchTabRefresh:hover,
.tabActionIcon:hover {
    color: rgb(var(--color-sf-primary));
    border-color: rgb(var(--color-sf-primary));
    background-color: rgb(var(--color-sf-primary), 0.12);
}

.e-btn, .e-css.e-btn {
    font-size: 13px;
}

/* On the active (orange) tab the label goes white; match the icon-buttons to it — white ring +
   glyph, translucent-white fill on hover (mirrors material3's on-primary for .e-tab-text/.e-tab-icon). */
.e-tab .e-tab-header .e-toolbar-item.e-active .matchTabRefresh,
.e-tab .e-tab-header .e-toolbar-item.e-active .tabActionIcon {
    color: rgb(var(--color-sf-on-primary));
    border-color: rgb(var(--color-sf-on-primary), 0.7);
}

.e-tab .e-tab-header .e-toolbar-item.e-active .matchTabRefresh:hover,
.e-tab .e-tab-header .e-toolbar-item.e-active .tabActionIcon:hover {
    color: rgb(var(--color-sf-on-primary));
    border-color: rgb(var(--color-sf-on-primary));
    background-color: rgb(var(--color-sf-on-primary), 0.2);
}

/*.matchTabContent {
    padding-top: 4px;
}*/

.dialog-footer {
    text-align: right;
    padding: 10px 0;
}

/* Timeline item spacing */
.custom-timeline .e-timeline-item {
    margin-bottom: 20px;
}

.custom-timeline .e-timeline-item:last-child {
    margin-bottom: 0;
}


/* ---- Active-filter chip (Issue #623) ------------------------------------------------
   Was `.candidate-natural-filter` in Candidates.razor.css. Promoted here, and renamed to
   drop the entity from the name, because Requisitions needs the identical surface and
   scoped CSS (.razor.css) is attribute-scoped to its own component — a second page cannot
   reuse it without a verbatim copy. This project already carries three near-identical grid
   stylesheets and the duplication has cost real time, so one global definition it is.
   Sole consumers: Candidates.razor and Requisitions.razor. */
.grid-natural-filter {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 7px 12px;
    border-bottom: 1px solid #d8c37e;
    background: #fff7d8;
    color: #344054;
}

.grid-natural-filter > i {
    color: #981b1f;
    font-size: 18px;
}

.grid-natural-filter span,
.grid-natural-filter strong,
.grid-natural-filter small {
    display: block;
}

.grid-natural-filter span {
    min-width: 0;
    flex: 1;
}

.grid-natural-filter strong {
    font-size: 12px;
}

.grid-natural-filter small {
    overflow: hidden;
    margin-top: 2px;
    color: #667085;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.grid-natural-filter button {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #667085;
    cursor: pointer;
}

.grid-natural-filter button:hover {
    background: rgba(152, 27, 31, .09);
    color: #981b1f;
}