html, body {
    min-height: 100vh;
    margin: 0;
    padding: 0;
}

* {
    box-sizing: border-box;
}

a {
    text-decoration: none !important;
}

body .common-max-width {
    margin: auto;
    max-width: 1296px;
}

@media screen and (min-width: 992px) {
    .lg\:form-max-width {
        max-width: 1096px; !important
    }

    .lg\:app-detail-max-width {
        max-width: 830px; !important
    }

    .lg\:app-detail-min-width {
        min-width: 830px; !important
    }
}

body #auth-background {
    background: #C4C7D6;
    border-radius: 10px;
}

.topbar-backdrop {
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: var(--indigo-600);
}

.chip-green {
    background-color: var(--green-100, #CAF1D8) !important;
    color: #1DA750 !important;
}

.chip-gray {
    background-color: var(--bluegray-100, #d9e0e3) !important;
    color: #526A76 !important;
}

.chip-red {
    background-color: var(--red-100, #FFD0CE) !important;
    color: #D9342B !important;
}

.chip-yellow {
    background-color: #FAEDC4 !important;
    color: #C79807 !important;
}

.chip-cyen {
    background: var(--cyan-100, #C3EDF5) !important;
    color: #059BB4 !important;
}

.chip-orange {
    background-color: var(--orange-100, #FEDDC7) !important;
    color: #D46213 !important;
}

.chip-pink {
    background-color: var(--pink-100, #FAD3E7) !important;
    color: #C93D82 !important;
}

.chip-purple {
    background-color: var(--purple-100, #EAD6FD) !important;
    color: #8F48D2 !important;
}

.chip-indigo {
    background-color: var(--indigo-100, #DADAFC) !important;
    color: #5457CD !important;
}

.chip-teal {
    background-color: var(--teal-100, #C7EEEA) !important;
    color: #119C8D !important;
}

.ui-chip.success-chip  {
    background-color: var(--green-600); !important;
    color: var(--surface-0) !important;
}

.custom-shadow {
    box-shadow: 0 2px 1px -1px rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 1px 3px 0 rgba(0, 0, 0, .12);
}

.login-bg {
    background: linear-gradient(180deg, rgba(50, 84, 157, 0.80) 7.15%, rgba(51, 59, 86, 0.19) 77.56%), url("/resources/images/login-bg.png") lightgray -1.446px -39.081px / 101.249% 148.541% no-repeat;
    filter: blur(2.5px);
}

.chip-blue {
    background-color: var(--indigo-100, #D0E1FD) !important;
    color: #326FD1 !important;
}

@keyframes scroll-left {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-100%);
    }
}

.tight-horizontal {
    width: 150px !important;
    text-align: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-left: none !important;
    border-right: none !important;
}

.row-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 3rem; /* Ensure space for buttons if needed */
}

.hover-buttons {
    display: none;
    align-items: center;
}

.purchase-order .ui-datatable tbody.ui-datatable-data > tr:hover .hover-buttons {
    display: flex;
}


.highlight-new {
    background-color: #fffbe6; /* A nice light yellow */
    border: 1px solid #ffe58f;
    box-shadow: 0 0 10px rgba(255, 229, 143, 0.8);
    transition: background-color 0.5s, border 0.5s;
}


body .no-padding-grid .grid {
    margin: 0 !important;
}

body .no-padding-grid .col {
    padding: 0 !important;
}

@media screen and (max-width: 600px) {
    .photoCam-container {
        width: 100% !important;
        height: auto !important;
    }

    .photoCam-container > div {
        width: 100% !important;
        height: auto !important;
    }

    .photoCam-container > div video {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
    }
}


/* Balance sheet config editor: the row reached from a report line.
   Fades from a highlight to nothing so the eye is drawn to it on arrival
   without leaving the row permanently marked. */
.bs-highlight-row > td {
    animation: bs-highlight-fade 4s ease-out forwards;
}

@keyframes bs-highlight-fade {
    0%, 40% {
        background-color: var(--yellow-100, #FAEDC4);
    }
    100% {
        background-color: transparent;
    }
}

/* ---------- Language switch ----------
   A segmented control rather than a toggle switch: both languages are on screen
   and the current one is filled, so there is nothing to decode. Two variants -
   the default for light backgrounds (login page, page footer) and
   .lang-switch-dark for the indigo topbar. */

.lang-switch {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--surface-300, #d1d5db);
    border-radius: 999px;
    overflow: hidden;
    background: var(--surface-0, #ffffff);
    line-height: 0;
}

.lang-switch .lang-switch-option {
    display: inline-block;
    min-width: 4.5rem;          /* equal halves: "English" and "বাংলা" differ in width */
    padding: 0.25rem 0.7rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    text-align: center;
    color: var(--text-color-secondary, #6b7280);
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.lang-switch .lang-switch-option:hover {
    background: var(--surface-100, #f3f4f6);
    color: var(--text-color, #3f4254);
}

.lang-switch .lang-switch-option.is-active {
    background: var(--indigo-600, #4f46e5);
    color: #ffffff;
    font-weight: 600;
}

.lang-switch .lang-switch-option:focus-visible {
    outline: 2px solid var(--indigo-600, #4f46e5);
    outline-offset: -2px;
}

.lang-switch-dark {
    border-color: rgba(255, 255, 255, 0.55);
    background: transparent;
}

.lang-switch-dark .lang-switch-option {
    color: #ffffff;
}

.lang-switch-dark .lang-switch-option:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}

.lang-switch-dark .lang-switch-option.is-active {
    background: #ffffff;
    color: var(--indigo-700, #4338ca);
}

.lang-switch-dark .lang-switch-option:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: -2px;
}

/* the topbar is crowded on a phone */
@media screen and (max-width: 575px) {
    .lang-switch .lang-switch-option {
        min-width: 3.75rem;
        padding: 0.2rem 0.5rem;
        font-size: 0.75rem;
    }
}