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

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.field-validation-error{
    font-size : 12px;
}

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

html {
    position: relative;
    min-height: 100%;
}

body {
    height: 100%;
}

/* Shared - debug, loading panel (source: components/Shared/shared.css) */
.debug-error-message {
    position: fixed;
    top: 10px;
    right: 10px;
    max-width: 400px;
    padding: 1rem;
    background: #dc3545;
    color: #fff;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    z-index: 10001;
}

    .debug-error-message.hidden {
        display: none;
    }

.main-loading-panel {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(245, 245, 245, 0.8);
    z-index: 10000;
    align-items: center;
    justify-content: center;
}

    .main-loading-panel[aria-hidden="false"] {
        display: flex;
    }

/* Layout (source: components/Layout/layout.css) */
.page-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.top-content-wrapper {
    flex-shrink: 0;
}

.main-content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    width: 100%;
}

.content-wrapper {
    width: 100%;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* TopMenu (source: components/TopMenu/top-menu.css) */


.main-menu-container {
    width: 100%;
}

.main-menu-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding : 2px 2px;
    gap: 0.5rem;
}

.main-menu-container #mainMenu,
.main-menu-container #mainMenu.k-menu,
.main-menu-container .main-menu-inner > .k-widget.k-menu {
    border: none;
    background: transparent;
    flex: 0 1 auto;
}

.main-menu-container .k-menu.k-menu-horizontal:not(.k-context-menu) {
    padding-block: 0px;
}

.main-menu-container .main-menu .k-menu,
.main-menu-container .main-menu-user-menu .k-menu {
    padding: 2px 0px;
}

.main-menu-container .k-menu .k-menu-group {
    border: none !important;
}

.main-menu-user-menu {
    flex: 0 0 auto;
}

.main-menu-container .k-menu .k-item.CustomItem {
    z-index: 99999;
}

.main-menu-container .k-menu .k-item.rootItem .k-link {
    text-align: center !important;
    text-decoration: none !important;
}

.main-menu-container .k-menu .k-item.CustomItem:hover .k-link {
    text-decoration: none !important;
}


.k-menu-popup {
    z-index: 10000 !important;
}


    .main-menu-user-menu .k-menu-popup .k-menu-group,
    .k-menu-popup .k-menu-group {
        overflow: visible;
    }

        .k-menu-popup .k-menu-group .k-item {
            min-height: 2rem;
        }

        .main-menu-user-menu .k-menu-popup .k-menu-group .k-link,
        #userMenu .k-menu-popup .k-menu-group .k-link,
        .k-menu-popup .k-menu-group .k-link {
            padding: 0.5rem 1rem;
        }


.main-menu-logout {
    text-decoration: none;
    color: #333 !important;
}

    .main-menu-logout:hover {
        text-decoration: underline;
    }


/* Loader overlay - full-page loading for Index, PopupForm, SaveForm (above Kendo Window ~10003) */
.loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 100001;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loader-overlay-hidden {
    display: none !important;
}

.loader-overlay-inner {
    width: 100%;
    height: 100%;
}

/* Popup window loader wrapper - fills window content area */
.loader-popup-window-wrap {
    width: 100%;
    height: 100%;
}

.k-window .loader-overlay {
    position: absolute;
}

/* Breadcrumb (source: components/Breadcrumb/breadcrumb.css) */
/*.breadcrumb-wrapper {
    margin-bottom: 1rem;
}

.breadcrumb {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 0.5rem;
}

    .breadcrumb li:not(:last-child)::after {
        content: ">";
        margin-left: 0.5rem;
        color: #666;
    }*/

/* Splitter (source: components/Splitter/splitter.css) - replaces inline styles from HtmlAttributes */
.content-wrapper #vertical,
.content-wrapper #vertical.k-splitter {
    flex: 1;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    border: none;
}

    /*.content-wrapper #vertical #top-pane,
    .content-wrapper #vertical .k-pane {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }*/
    /* Horizontal splitter fills vertical top-pane - replaces inline style="height:100%" */
    .content-wrapper #vertical #horizontal,
    .content-wrapper #horizontal.k-splitter {
        flex: 1;
        min-height: 0;
        height: 100%;
        border: none;
    }
/* Horizontal splitter panes: full height, scroll separately */
/*.content-wrapper #horizontal .k-pane {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
}*/

/* FIX: Prevent left pane stretching before Kendo initializes */
.content-wrapper #left-pane {
    width: 15%;
 /*   min-width: 250px;
    max-width: 250px;*/
    /*flex: 0 0 250px;*/
}

/* Prevent layout flicker before Kendo Splitter initializes */
/*.page-splitter {
    visibility: hidden;
}*/

    /*.content-wrapper #left-pane .left-pane,
    .content-wrapper #left-pane .left-navigation {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .content-wrapper #left-pane .left-nav-panelbar,
    .content-wrapper #left-pane #leftNavPanelBar {
        flex: 1;
        min-height: 0;
        height: 100%;
        overflow-y: auto;
    }*/
.content-wrapper .k-splitter {
    display: flex;
}
.content-wrapper #center-pane {
    height: 100%;
    min-height: 0;
    width: 82%;
    /*overflow-y: auto;*/
    /*overflow-x: hidden;*/
}

/* Layout Focus : splitter fills height, panes scroll vertically */
.content-wrapper #focusHorizontal,
.content-wrapper #focusHorizontal.k-splitter {
    flex: 1;
    min-height: 0;
    height: 100%;
    /*max-height: 100%;*/
    /*overflow: hidden;*/
    display: flex;
    flex-direction: row;
    border: none;
}

    /* Kendo may wrap panes; ensure inner splitter structure has height so panes can scroll */
    .content-wrapper #focusHorizontal .k-splitter-wrap,
    .content-wrapper #focusHorizontal .k-splitter-flex {
        /*height: 100% !important;*/
        min-height: 0;
        /*overflow: hidden;*/
    }

    .content-wrapper #focusHorizontal .k-pane {
        /*height: 100% !important;*/
        min-height: 0;
        /*max-height: 100%;*/
        overflow-y: auto !important;
        /*overflow-x: hidden;*/
        display: block;
        -webkit-overflow-scrolling: touch;
    }

/*.content-wrapper #left-pane,
.content-wrapper #left-pane.k-pane {
    height: 100% !important;
    min-height: 0;
    max-height: 100%;
    overflow-y: auto !important;
    overflow-x: hidden;
}*/

/*.content-wrapper #center-pane,
.content-wrapper #center-pane.k-pane {
    height: 100% !important;
    min-height: 0;
    max-height: 100%;
    overflow-y: auto !important;
    overflow-x: hidden;
}*/



/* MainContent (source: components/MainContent/main-content.css) */
.main-pane {
    flex: 1;
    min-width: 0;
}

.page-header-area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.page-title {
    font-size: 1.5rem;
    margin: 0;
}


/* Login page */
.login-wrapper {
    min-height: 60vh;
}

/*.login-card {
    width: 420px;
}*/

.forgot-box,
.forgot-info-hidden {
    display: none;
}

/*.banner-text span {
    font-size: 1.25rem;
}
*/
.form-sections {
    margin-top: 1rem;
}

/* Cell spacing/padding from form (CSS variables applied by MainContent) */
.form-control-wrapper {
    margin: var(--form-cell-spacing, 0);
    padding: var(--form-cell-padding, 0);
}
/* Multi-column section layout */
.form-sections-row {
    width: 100%;
}

.form-sections-column {
    margin-bottom: 1rem;
}
/* Section description (SectionDescription in AppSection) */
.form-section-description {
    margin: 0 0 0.75rem 0;
    color: var(--bs-secondary-color, #6c757d);
    font-size: 0.9375rem;
}
/* Right panel split (when HasRightPanel) */
.form-sections-split {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    gap: 1rem;
}

.form-sections-main {
    flex: 1;
    min-width: 0;
}

.form-sections-right-panel {
    flex-shrink: 0;
    overflow: auto;
}

/* Div-based form layout (body-wrapper, content-wrapper-c align with OLD RenderEngine) */
.body-wrapper {
    width: 100%;
}

.content-wrapper-c {
    width: 100%;
}

.page-header-title-col {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.form-help-link {
    display: inline-flex;
    align-items: center;
    color: var(--bs-secondary, #6c757d);
    text-decoration: none;
}

    .form-help-link:hover {
        color: var(--bs-primary, #0d6efd);
    }

.form-save-button-col {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    align-items: center;
}

/* DynamicForm control: required indicator and label styling */
.form-control-required {
    color: #c00;
    margin-left: 0.15em;
}

.form-control-wrapper.required .form-control-label {
    font-weight: 500;
}

.form-control-label.label-bold {
    font-weight: bold;
}

.form-control-label.label-italic {
    font-style: italic;
}

.form-control-label.label-underline {
    text-decoration: underline;
}

/* Page-level toolbar (when AppPage.ShowToolBar is true) */
.page-toolbar {
    margin-bottom: 0.5rem;
    min-height: 2rem;
}

.page-header-area.scrolled {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Notifications (source: components/Notifications/notifications.css) */
.main-notification {
    display: none;
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 1rem 1.5rem;
    /*background: #333;
    color: #fff;*/
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    z-index: 10000;
    max-width: 90%;
}

    .main-notification.show {
        display: block;
        animation: fadeIn 0.3s ease;
    }

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.success-feedback-message {
    background-color: #28a745 !important;
    color: #fff !important;
}

.partial-fail-feedback-message {
    background-color: #ffc107 !important;
    color: #212529 !important;
}

.fail-feedback-message {
    background-color: #dc3545 !important;
    color: #fff !important;
}

/* Popup (source: components/Popup/popup.css) */
.popup-page-content,
.popup-form-content {
    padding: 1rem;
}

.form-footer-area.lower-toolbar {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    align-items: center;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem 2rem;
    border-top: 1px solid var(--bs-border-color, #dee2e6);
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Fixed height for the external user section container */
.externalUser-container {
    height: 550px;
}

/* Fixed height for the internal user section container */
.internalUser-container {
    height: 550px;
}


.main-menu {
    width: 100%;
}

    .main-menu .k-menu-horizontal {
        display: flex;
        flex-wrap: wrap;
    }

    .main-menu .k-item {
        white-space: normal; /* allow text wrapping if needed */
    }



html {
    height: 100%;
    margin: 0;
}