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

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

.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;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

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

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

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

.table-responsive:has(.dropdown-menu) {
    overflow: initial !important;
}

.dropdown-menu li {
    cursor: pointer;
}

/* Select2 Validation Styles */
.select2-container .select2-selection.is-invalid {
    border: none;
    border: 1px solid #dc3545 !important;
    box-shadow: none !important;
}

.select2-container .select2-selection.is-valid {
    border: none;
    border: 1px solid #198754 !important;
    box-shadow: none !important;
}

.select2-container--bootstrap-5 .select2-selection.is-invalid {
    border: none;
    border: 1px solid #dc3545 !important;
    box-shadow: none !important;
}

.select2-container--bootstrap-5 .select2-selection.is-valid {
    border: none;
    border-color: 1px solid #198754 !important;
    box-shadow: none !important;
}

/* Desktop/tablet only: the logo is pulled out of flow so it can be
   repositioned (see "Move logo to left when sidebar is collapsed" below)
   independently of the sidemenu-toggle button next to it. Below 992px this
   rule must NOT apply — the theme's own .header-element/.header-content-left
   flex layout already places the logo and hamburger side by side with no
   overlap, and forcing position:absolute here collapses the logo's flex
   slot to zero width, letting the hamburger's box drift left underneath it
   (invisible/unreliable tap target on phones — see [[project-bomoni-mobile-hamburger-overlap]]). */
@media (min-width: 992px) {
    .horizontal-logo {
        position: absolute !important;
        top: 0;
        left: 3%;
    }
}

/* Constrain header logo images to their intended box regardless of the
   source file's native pixel dimensions — nothing else in the theme sets
   a size here (only a display:none/block toggle), so an oversized source
   image renders at full native size and breaks the header layout. */
.app-header .horizontal-logo .header-logo img {
    max-width: 150px;
    max-height: 35px;
    width: auto;
    height: auto;
    object-fit: contain;
}


/* Fix for header logo visibility on large screens */
@media (min-width: 992px) {
    .app-header .horizontal-logo {
        display: block !important;
    }

    .mud-container:last-child {
        padding-bottom: 4rem;
    }

    .app-header .horizontal-logo .header-logo .desktop-logo {
        display: block !important;
    }

    .app-header .horizontal-logo .header-logo .toggle-logo,
    .app-header .horizontal-logo .header-logo .desktop-dark,
    .app-header .horizontal-logo .header-logo .toggle-dark {
        display: none !important;
    }

    /* Show toggle logo when sidebar is collapsed */
    [data-toggled="close-menu-close"] .app-header .horizontal-logo .header-logo .desktop-logo,
    [data-toggled="icon-text-close"] .app-header .horizontal-logo .header-logo .desktop-logo,
    [data-toggled="icon-overlay-close"] .app-header .horizontal-logo .header-logo .desktop-logo,
    [data-toggled="detached-close"] .app-header .horizontal-logo .header-logo .desktop-logo {
        display: none !important;
    }

    [data-toggled="close-menu-close"] .app-header .horizontal-logo .header-logo .toggle-logo,
    [data-toggled="icon-text-close"] .app-header .horizontal-logo .header-logo .toggle-logo,
    [data-toggled="icon-overlay-close"] .app-header .horizontal-logo .header-logo .toggle-logo,
    [data-toggled="detached-close"] .app-header .horizontal-logo .header-logo .toggle-logo {
        display: block !important;
    }

    /* Move logo to left when sidebar is collapsed */
    [data-toggled="close-menu-close"] .app-header .horizontal-logo,
    [data-toggled="icon-text-close"] .app-header .horizontal-logo,
    [data-toggled="icon-overlay-close"] .app-header .horizontal-logo,
    [data-toggled="detached-close"] .app-header .horizontal-logo {
        left: 1.5% !important;
    }
}

/* Ensure header appears above sidebar */
.app-header {
    position: relative;
    z-index: 1030 !important;
}

.app-sidebar {
    position: relative;
    z-index: 1020;
}

/* Ensure horizontal logo in header is properly positioned above sidebar */
.app-header .horizontal-logo {
    position: relative;
    z-index: 1031;
}

/* Override width restriction to allow full width usage */
[data-nav-layout=horizontal] .main-header-container {
    width: 100% !important;
    margin: 0 !important;
}

.branchAssignmentBtn {
    min-width: 30px !important;
}

.branchAssignmentBtn .mud-button-label {
    margin-left: 0.5rem;
}

.popupBtn {
    height: 1.5rem;
    margin-top: 1% !important;
    width: 7%;
    background-color: #2fb344 !important;
    padding: 0.26rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
}

.popupEditBtn {
    height: 1.5rem;
    margin-top: 1% !important;
    width: 7%;
    background-color: rgba(89,74,226,1) !important;
    padding: 0.26rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
}

.popupCategoryBtn {
    height: 1.5rem;
    margin-top: 6px !important;
    width: 3%;
    background-color: #2fb344 !important;
    padding: 2.26rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
}

.btnCloseDialog {
    background-color: #da89f8 !important;
    color: white !important;
    min-width: 5rem;
    height: 2.1rem;
    padding: 0 0.75rem;
    white-space: nowrap;
}

.btnSaveDiaLog {
    background-color: #546dfe !important; /* Blue color */
    color: white !important;
    min-width: 5rem;
    height: 2.1rem;
    padding: 0 0.75rem;
    white-space: nowrap;
}

.btnCloseDialog:hover {
    background-color: #da19f8 !important;
    color: white !important;
}

.btnSaveDiaLog:hover {
    background-color: #1161ac !important; /* Blue color */
    color: white !important;
}

.animated-arrow.hor-toggle {
    width: 3rem !important;
    margin-inline-end: 0 !important;
    height: 2rem;
    touch-action: manipulation;
    /* .horizontal-logo is position:absolute with z-index:1031 (see above) and,
       on narrow viewports, its collapsed flex container lets this button shift
       left underneath the logo image, hiding part or all of the hamburger.
       Force this above the logo so it's always fully visible and tappable. */
    position: relative;
    z-index: 1032 !important;
}
.selectedItem {
    background-color: #0d6efd !important;
    color: white !important;
    border-radius: 8px !important;
}
.tableImage {
    width: 40px !important;
    height: 34px !important;
    object-fit: cover !important;
    border-radius: 4px !important;
}
.readonly-field input {
    background-color: #f5f5f5; /* light grey */
    color: #6c757d; /* muted text */
    cursor: not-allowed;
}

.mark {
    background-color: #fff3b0;
    padding: 0 1px;
    border-radius: 2px;
}
.separator {
    height: 2px;
    background-color: rgba(0,0,0,0.12);
    margin: 4px 0;
    flex-shrink: 0; /* critical inside flex column */
}