:root {
    --custom-button-font-weight: 600;
}

html {
    font-size: 14px; /* 15px */
}

/* Latin/English is served by Noto Sans, the Latin member of the same
   superfamily as the Bengali face below - identical x-height (0.536 em) and
   stroke modulation, so mixed English/Bangla lines sit on the same rhythm.
   The split is by unicode-range, so each script uses its own file whichever
   way the language toggle is set. */
@font-face {
    font-family: "NotoSans";
    src: url("/jakarta.faces.resource/NotoSans-Variable-latin.woff2.xhtml?ln=fonts") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;

    /* Latin */
    unicode-range:
            U+0000-00FF,
            U+0131,
            U+0152-0153,
            U+02BB-02BC,
            U+02C6,
            U+02DA,
            U+02DC,
            U+2000-206F,
            U+20AC,
            U+2122,
            U+2212,
            U+FEFF,
            U+FFFD;
}

@font-face {
    font-family: "NotoSans";
    src: url("/jakarta.faces.resource/NotoSans-Variable-latin-ext.woff2.xhtml?ln=fonts") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;

    /* Latin Extended */
    unicode-range:
            U+0100-02BA,
            U+02BD-02C5,
            U+02C7-02CC,
            U+02CE-02D7,
            U+02DD-02FF,
            U+1D00-1DBF,
            U+1E00-1E9F,
            U+1EF2-1EFF,
            U+2020,
            U+20A0-20AB,
            U+20AD-20C0,
            U+2113,
            U+2C60-2C7F,
            U+A720-A7FF;
}

@font-face {
    font-family: "NotoSans";
    src: url("/jakarta.faces.resource/NotoSansBengali-Regular.woff2.xhtml?ln=fonts") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;

    /* Bengali */
    unicode-range:
            U+0980-09FF,
            U+200C-200D,
            U+25CC;
}

body,
body .ui-widget {
    font-family: NotoSans, Arial, sans-serif;
}

body .ui-button {
    background: var(--indigo-600);
    border-color: var(--indigo-600);
    font-weight: var(--custom-button-font-weight) !important;
}

body .ui-button:hover {
    background: var(--indigo-700);
    border-color: var(--indigo-700);
}

body .ui-button.ui-button-outlined {
    color: var(--indigo-600);
    background: #FFFFFF;
    border: 1px solid var(--indigo-600);
}

body .ui-button.ui-button-outlined:hover {
    color: var(--indigo-600);
    background: #FAFAFA;
    border: 1px solid var(--indigo-600)
}

body .ui-button-flat {
    color: var(--indigo-600) !important;
    font-weight: var(--custom-button-font-weight) !important;
    border: 0 !important;
}

body .ui-button-flat:hover {
    color: var(--indigo-900) !important;
    background: var(--indigo-100) !important;
    border: 0 !important;
}


body .ui-button-warning {
    color: #e7a500 !important;
}

body .ui-selectonebutton>.ui-button {
    color: var(--indigo-600) !important;
}

body .ui-selectonebutton>.ui-button.ui-state-active {
    color: #FFFFFF !important;
    background: var(--indigo-600) !important;
}

body .ui-selectonebutton>.ui-button.ui-state-focus {
    outline-offset: 0;
    box-shadow: 0 0 0 .2em #ABADE2;
}

body #loginPassword .ui-password {
    padding: 0;
    width: 100%;
}

body #loginPassword .ui-password .ui-inputfield {
    height: 2.4rem;
    border: 1px solid #ced4da;
    border-left: 0 none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/*** override primefaces message style ***/
.ui-messages-error-summary {
    font-weight: normal !important;
}

.ui-messages-error, .ui-message-error {
    color: var(--red-400) !important;
    background-color: var(--pink-50) !important;
    border-width: 0 !important;
    padding: 13px !important;
    font-size: 15px !important;
}

.ui-messages-error-icon {
    color: var(--red-400) !important;
    border: 0 !important;
    font-weight: normal !important;
    font-size: 1rem !important;
    margin: 0 !important;
}

/*required=true star icon*/
.ui-outputlabel .ui-outputlabel-rfi {
    margin-left: 0.4em;
    color: red;
}

body .ui-radiobutton .ui-radiobutton-box.ui-state-active {
    border-color: var(--indigo-400, #8183F4) !important;
    background: var(--indigo-600) !important;
    color: #FFFFFF !important;
}

/* Apply width: 100% to all datatables except the one with "frozen" class */
body .ui-datatable:not(.frozen) .ui-datatable-scrollable-header,
body .ui-datatable:not(.frozen) .ui-datatable-scrollable-body {
    width: 100% !important;
}


body .ui-datatable .ui-datatable-scrollable-header thead th:not(:first-child) {
    border-left: 1px solid #E5E7EB !important;
}

body #orderDialog .ui-dialog .ui-dialog-footer {
    background: #FAFAFA !important;
    padding: 16px 20px !important;
    border-top: 1px solid #e4dfdf;
}

body #orderDialog .ui-dialog.ui-resizable .ui-dialog-content {
    padding-bottom: 0;
}
body .promotion-card.ui-card  .ui-card-content {
    padding: 0 !important;
}


body .ui-selectcheckboxmenu .ui-selectcheckboxmenu-multiple-container.ui-inputfield {
    background: white;
    overflow: auto;
}

body .ui-toggleswitch.ui-toggleswitch-checked .ui-toggleswitch-slider {
    background: var(--indigo-600) !important;
}

body .order-card .ui-card .ui-card-content {
    padding: 0 !important;
}
/*calendar related styles  start*/
body .fc .fc-toolbar .fc-button{
    background: var(--indigo-600) !important;
    border-radius: 6px;
    border: 1px solid var(--indigo-600) !important;
    font-weight: var(--custom-button-font-weight) !important;
}

body .fc .fc-day-today{
    background: var(--indigo-100) !important;
}

body .fc .fc-event{
    background: var(--indigo-600) !important;
    border: 1px solid var(--indigo-600) !important;
}
/*calendar related styles end*/

body #pensionOrder .ui-fluid .ui-inputnumber .ui-inputtext {
    width: 100%;
    background: white !important;
    height: 3rem;
    border-radius: 0.5rem;
}

body #loanApplyForm .ui-fluid .ui-inputnumber .ui-inputtext {
    width: 100%;
    background: white !important;
    height: 3rem;
    border-radius: 0.5rem;
}

body #acrReviewerForm .ui-fluid .ui-inputnumber .ui-inputtext {
    width: 100%;
    background: white !important;
    height: 3rem;
    border-radius: 0.5rem;
}

body #pensionApplyForm .ui-fluid .ui-inputnumber .ui-inputtext {
    width: 100%;
    background: white !important;
    height: 3rem;
    border-radius: 0.5rem;
}

body #loanReviewForm .ui-fluid .ui-inputnumber .ui-inputtext {
    width: 100%;
    background: white !important;
    height: 3rem;
    border-radius: 0.5rem;
}

body #leaveForeignForm .ui-fluid .ui-inputnumber .ui-inputtext {
    width: 100%;
    background: white !important;
    height: 3rem;
    border-radius: 0.5rem;
}

body #officePostForm .ui-fluid .ui-inputnumber .ui-inputtext {
    width: 100%;
    background: white !important;
    height: 3rem;
    border-radius: 0.5rem;
}

.foreign-leave-upload-button .ui-button {
    height: 3rem;
    line-height: 4rem;
    font-weight: bold;
    border-radius: 0.5rem;
}

body .p-datepicker .ui-datepicker-trigger.ui-button{
    height: 100% !important;
}

body .ui-button-flat.flat-red-button{
    color: var(--red-600) !important;
    font-weight: var(--custom-button-font-weight) !important;
}

body #FYListForm .ui-button-flat.flat-red-button{
    color: var(--red-600) !important;
    font-weight: var(--custom-button-font-weight) !important;
}

body #FYListForm .ui-button-flat.flat-green-button{
    color: var(--green-600) !important;
    font-weight: var(--custom-button-font-weight) !important;
}

body #nps-data-form .ui-fluid .p-datepicker .ui-datepicker-trigger.ui-button {
    height: 3rem !important;
}

body #nps-data-form .ui-button-flat.flat-red-button{
    color: var(--red-600) !important;
    font-weight: var(--custom-button-font-weight) !important;
}

body #nps-data-form .ui-button-flat.flat-indigo-button{
    color: var(--indigo-600) !important;
    font-weight: var(--custom-button-font-weight) !important;
}

/*body #nps-data-form thead {*/
/*    display: none !important;*/
/*}*/

.ui-blockui {
    background: rgba(0, 0, 0, 0) !important;
    position: fixed  !important;
    top: 0  !important;
    text-align: center;
    height: 100%  !important;
    backdrop-filter: blur(2px);
}

.ui-blockui-content {
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

body .ui-spinner .ui-spinner-input {
    height: 100%  !important;
    background-color: var(--surface-0) !important
}

/* Ensure growl message background and content are fully opaque (no transparency) */
.ui-growl-item-container {
    opacity: 1 !important;
}

/* Chronoline */
body .ui-chronoline .ui-chronoline-event-marker {
    border: 2px solid var(--indigo-600);
}

.ui-chronoline-event-opposite {
    flex: 0;
}

.ui-chronoline-event {
    min-height: 40px;
}

/* Hide the whole header row */
.no-header thead {
    display: none;
}

/* Target the content wrapper inside the panel */
.borderless-panel .ui-panel-content {
    border: none !important;
    box-shadow: none !important; /* In case any theme applies shadow here */
    padding-left: 0 !important; /* Remove any default padding that might create visual space */
}

@media screen and (max-width: 640px) {
    .ui-paginator .ui-paginator-first,
    .ui-paginator .ui-paginator-last,
    .ui-paginator .ui-paginator-pages {
        display: none !important;
    }
    .ui-paginator {
        display: flex !important;;
        flex-wrap: wrap !important;;
        justify-content: center !important;;
        row-gap: .25rem !important;;
    }
}

body .ui-card {
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.02), 0 0 2px rgba(0, 0, 0, 0.05), 0 1px 4px rgba(0, 0, 0, 0.08) !important;
}

.fc .fc-toolbar-title {
    font-size: 1.5rem !important;
}

/* p:steps — the theme lays the wizard out as four equal flex columns (flex: 1 1 0) with a
   2rem gap above each number, so on narrow screens the labels wrap into cramped multi-line
   blocks and the bar eats most of the viewport. Tighten it on tablets, then drop to numbers
   only on phones, keeping the active step's label so the user knows where they are.
   Selectors mirror the theme's own `body .ui-steps ...` depth. */
@media screen and (max-width: 960px) {
    body .ui-steps .ui-steps-item .ui-menuitem-link {
        overflow: visible !important;
    }

    body .ui-steps .ui-steps-item .ui-menuitem-link .ui-steps-number {
        margin-top: 1rem !important;
        width: 1.75rem !important;
        height: 1.75rem !important;
        font-size: 1rem !important;
    }

    body .ui-steps .ui-steps-item .ui-menuitem-link .ui-steps-title {
        font-size: .8rem !important;
        line-height: 1.2 !important;
    }
}

@media screen and (max-width: 640px) {
    body .ui-steps .ui-steps-item .ui-menuitem-link .ui-steps-number {
        margin-top: .5rem !important;
    }

    body .ui-steps .ui-steps-item .ui-menuitem-link .ui-steps-title {
        display: none !important;
    }

    body .ui-steps .ui-steps-item.ui-state-highlight .ui-menuitem-link .ui-steps-title {
        display: block !important;
        font-size: .75rem !important;
    }
}

/* p:fileUpload (mode="simple" skinSimple) writes styleClass onto the outer
   .ui-fileupload-simple wrapper, not onto the inner .ui-button, so the theme's
   `.ui-button.ui-button-outlined` rule can never be matched from markup. Mark the
   wrapper with .upload-outlined instead and restyle the button inside it. An upload
   trigger is a secondary action; the default solid primary fill overpowers a form
   of light outlined inputs. */
body .upload-outlined .ui-button {
    background-color: transparent;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
}

body .upload-outlined .ui-button.ui-state-hover {
    background: rgba(33, 150, 243, .04);
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
}

body .upload-outlined .ui-button.ui-state-active,
body .upload-outlined .ui-button.ui-state-down {
    background: rgba(33, 150, 243, .16);
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
}

#payrollSalaryCorrection .ui-card-content {
    padding: 0 !important;
}
/* Dashboard "My Tasks & Alerts" rows. The row lays the task out beside its
   expiry date on a wide screen and stacks the two on a narrow one (PrimeFlex
   md: classes in the markup); these rules only make sure a long, unbroken
   event name wraps inside its column instead of widening the card. The table
   is reflow="true", so below 640px PrimeFaces already turns each cell into a
   full-width block of its own. */
.task-event {
    overflow-wrap: anywhere;
}

.task-expiry {
    overflow-wrap: anywhere;
}