/* Supplier Portal Design System CSS Variables */
:root {
    --ds-font-family: 'Inter', sans-serif;
    --ds-font-size-base: 14px;
    --bs-body-font-size: 14px;
    --page-bgcolor: #272C30;
    --footer-bgcolor: #353D43;
    --text-primary: #393939;
    --text-secondary: #6e6d7e;
    --back-primary: #f2f2f2;
    --bg-secondary: #e4e6ea;
    --text-quaternary: #6E6D7E;
    --home-hero-bg: url('images/home-hero.jpg');
    --hero-img-bg2: rgba(0, 70, 180, 0.72);
    --hero-img-bg: rgba(53, 61, 67, 0.7);

    --card-min-width: 290px;
    --applications-card-min-width: 530px;

    --ds-accent: #006DC0;

    /* Primary Brand Colors - Uses tenant theming variables */
    --kendo-color-primary: var(--primary-color, #0078D4);
    --kendo-color-primary-hover: var(--secondary-color, #106EBE);
    --kendo-color-primary-active: var(--primary-color, #0078D4);
    --kendo-color-primary-on-surface: var(--primary-color, #0078D4);
    --kendo-color-on-primary: #fff;
    
    /* Background */
    --kendo-color-app-surface: #F2F2F2;
    
    /* Text */
    --kendo-color-on-app-surface: #393939;
    
    /* Borders & Lines */
    --kendo-color-border: #D9E5F0;
    --kendo-color-border-hover: var(--primary-color, #0078D4);
    
    /* Border Radius */
    --kendo-border-radius-md: 8px;
    
    /* Typography */
    --kendo-font-family: 'Inter', sans-serif;
}

@media (max-width: 768px) {
    :root {
        --applications-card-min-width: 330px;
    }
}

.srm-route {
    --page-bgcolor: #0d5662;
    --hero-img-bg: rgba(13, 86, 98, 0.64);
}

html, body {
    font-family: var(--ds-font-family);
    font-size: var(--ds-font-size-base);
    background-color: var(--back-primary, #f2f2f2);
    height: 100%;
    margin: 0;
}

h1:focus { outline: none; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.2rem; font-weight: 400; }
h4 { font-size: 1.0rem; }

.text-secondary { color: var(--text-secondary, #6e6d7e); }
.back-primary { background-color: var(--back-primary, #f2f2f2); }
.bg-secondary { background-color: var(--bg-secondary, #e4e6ea); }
.fontsize-medium {font-size: 0.8rem;}
.fontsize-large {font-size: 1.2rem;}
.fontsize-xlarge {font-size: 1.6rem;}
.fontsize-xxlarge {font-size: 2.5rem;}
.weight-regular { font-weight: 400; }
.weight-medium { font-weight: 500; }
.weight-semi-bold { font-weight: 600; }
.weight-bold { font-weight: 700; }

.page {
    margin: 0 auto; max-width: 1440px; width: 100%; height: 100%; min-height: 100vh; background: #f5f7fa;
    display: flex; flex-direction: column;
}
.page-wrapper {
    /*margin: 32px 32px 32px 32px;*/
    width: 100%;
    margin-left: 32px; margin-right: 32px;
    border-radius: 0.7rem 0.7rem 0 0;
    background-color: white;
    color: var(--text-primary);
    min-height: 400px;
}


.page-inside { padding-left: 48px; padding-right: 48px; }
.page-breadcrumb {}
.border-radius { border-radius: 0.7rem !important; }
.inline-flex-items { display: flex; align-items: center; gap: 0.5rem; }
.inline-space-between { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.item-shadow { box-shadow: 0 4px 12px rgba(104, 137, 165, 0.08); transition: box-shadow 0.2s ease; }
.hline { border: none; border-top: 1px solid #bababa; }

.card-info i { font-size: 1.2rem; padding-right: 0.4rem; color: var(--text-primary); }
.card-container:hover,
.carousel-card:hover { box-shadow: 0 4px 24px rgba(104, 137, 165, 0.12); }
.card-container-clickable { cursor: pointer; }
.card-minrows-container {
    --rows: 2; min-height: calc(1.2rem * var(--rows));
}
.card-minrows {
    display: -webkit-box; -webkit-line-clamp: var(--rows); -webkit-box-orient: vertical;
    overflow: hidden; text-overflow: ellipsis; line-height: 1.2rem; margin: 0;
}
.card-border {border: 1px solid var(--ds-color-neutral-500, #e2e2e2);}
.card-border-bottom {border-bottom: 1px solid var(--ds-color-neutral-500, #e2e2e2);}


.header-hero { min-height: 80px; position: relative; display: flex; flex-direction: column; align-items: stretch; }
.header-hero-img-flip { transform: scaleX(-1); }
.header-hero-border-radius { border-radius: 8px 8px 0 0; overflow: hidden; }
.header-hero .header-hero-bg-img {
    position: absolute; left: 0; top: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: center; z-index: 0;
}
.header-hero .header-hero-layout { min-height: inherit; z-index: 100; }
.header-hero-background { background: var(--hero-img-bg); }
.header-hero-gradient { background: linear-gradient(to right, #6e6d7e, #55738c); }

.nodata-info {
    margin: 0 auto; padding: 1.25rem; width: 480px; height: 170px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: #ffffff; border: 1px solid #e9ecef; border-radius: 12px;
    box-shadow: 0 4px 12px rgba(104, 137, 165, 0.08);
    transition: box-shadow 0.2s ease;
}

/* Carousel card — appearance only, no layout sizing */

.cards-wrapper { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-bottom: 2rem;


    .card-container-noborder,
    .card-container,
    .carousel-card { padding: 1.25rem; min-height: 170px; display: flex; flex-direction: column; background: #ffffff; }

    .carousel-card { width: 100%; height: 100%; box-sizing: border-box; }

    .card-container-noborder,
    .card-container { flex: 1 1 var(--card-min-width); max-width: calc(25% - 0.75rem); min-width: var(--card-min-width); }

    .card-container,
    .carousel-card { border: 1px solid #e9ecef; border-radius: 12px; box-shadow: 0 4px 12px rgba(104, 137, 165, 0.08); transition: box-shadow 0.2s ease; }

    .card-container:hover,
    .carousel-card:hover { box-shadow: 0 4px 24px rgba(104, 137, 165, 0.12); }

    .carousel-card:has(.header-hero) { padding: 0; }
    .carousel-card:has(.header-hero) > *:not(.header-hero) { padding-left: 1.25rem; padding-right: 1.25rem; }
    .carousel-card:has(.header-hero) > *:last-child { padding-bottom: 1.25rem; }

    .card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; }
    .card-row { display: flex; justify-content: space-between; align-items: center; width: 100%; }
    .card-title { font-weight: 600; color: var(--text-primary); margin: 0; line-height: 1.4; word-break: break-word; }
    .card-divider { border: none; border-top: 1px solid #bababa; margin: 0.75rem 0; }
    .card-divider-sm { border: none; border-top: 1px solid #bababa; margin: 0.15rem 0; }
    .card-info { display: flex; align-items: center; width: 100%; gap: 0.375rem; font-size: 1.0rem; font-weight: 400; color: var(--text-primary); }
    .card-info i { font-size: 1.2rem; color: var(--text-primary); }
    .card-gap-half { gap: 0.5rem; }
    .card-gap-base { gap: 1.0rem; }
    .card-mt-auto { margin-top: auto; }
    .card--flexrow { display: flex; flex-direction: row; }
    .card--flexcol { display: flex; flex-direction: column; }

    .card-min2rows-container { min-height: calc(1.2em * 2); }
    .card-min2rows { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; line-height: 1.2em; margin: 0; }

    .card-min5rows-container { min-height: calc(1.2em * 5); }
    .card-min5rows { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; line-height: 1.2em; margin: 0; }
}

.card-content {
    i {
        font-size: 1.5rem;
        width: 3.4rem;
        height: 3.4rem;
        flex-shrink: 0;
        margin-top: 0.15rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--ds-border-color);
        border-radius: 50%;
    }

    .content-wrapper {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }
}

.card-live-height { height: 350px; }

.card-tooltip {
    position: relative;
    align-self: flex-end;
    margin-top: auto;
}

.card-tooltip[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    color: var(--text-primary);
    background-color: #ffffff;
    font-weight: 400;
    line-height: 1.4;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    white-space: normal;
    max-width: 220px;
    width: max-content;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 1008;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.card-tooltip[data-tooltip]:hover::after {
    opacity: 1;
    visibility: visible;
}


.dstab-content { padding: 24px 0; }
.dsinput-maxwidth { max-width: 525px; }
.required-asterisk { color: var(--ds-text-warning); }

.split-bg {
    display: flex; flex: 1; padding-top: 32px;
    background: linear-gradient(
        to bottom,
        var(--page-bgcolor) 0rem,
        var(--page-bgcolor) 30rem,
        white 30rem,
        white 50rem
    );
}



a, .btn-link {
    color: var(--primary-color, #0078D4);
}

.btn-primary {
    color: #fff;
    background-color: var(--primary-color, #0078D4);
    border-color: var(--secondary-color, #106EBE);
}

.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 var(--primary-color, #0078D4);
}

.content {
    padding-top: 1.1rem;
}

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

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1zbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+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."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

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

/* =====================================================
   Telerik Popup Positioning & Z-Index
   
   Ensure all Telerik popups appear above sticky headers
   and have proper styling
   ===================================================== */

/* Ensure high z-index for all Telerik popups */
.k-animation-container,
.k-popup {
    z-index: 10001 !important;
}

/* Style the dropdown popup for navigation */
.k-popup.k-dropdownbutton-popup,
.k-animation-container > .k-popup {
    margin-top: 0 !important;
    border-radius: 0 0 8px 8px;
    border: 1px solid #E5E5E5;
    border-top: 2px solid var(--primary-color, #0078D4);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    background: #FFFFFF;
}

/* Dropdown menu list styling */
.k-dropdownbutton-popup .k-menu-group,
.k-dropdownbutton-popup .k-group,
.k-popup .k-menu-group,
.k-popup .k-group {
    padding: 0;
    margin: 0;
    background: #FFFFFF;
}

/* Dropdown menu items */
.k-dropdownbutton-popup .k-menu-item,
.k-dropdownbutton-popup .k-item,
.k-popup .k-menu-item,
.k-popup .k-item {
    padding: 12px 20px;
    color: #393939;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    border-bottom: 1px solid #F0F0F0;
    background: #FFFFFF;
    cursor: pointer;
}

.k-dropdownbutton-popup .k-menu-item:last-child,
.k-dropdownbutton-popup .k-item:last-child,
.k-popup .k-menu-item:last-child,
.k-popup .k-item:last-child {
    border-bottom: none;
}

.k-dropdownbutton-popup .k-menu-item:hover,
.k-dropdownbutton-popup .k-item:hover,
.k-dropdownbutton-popup .k-menu-item.k-hover,
.k-dropdownbutton-popup .k-item.k-hover,
.k-popup .k-menu-item:hover,
.k-popup .k-item:hover,
.k-popup .k-menu-item.k-hover,
.k-popup .k-item.k-hover {
    background-color: #F5F5F5 !important;
    color: var(--primary-color, #0078D4) !important;
}

/* Fix for the menu link text inside dropdown items */
.k-dropdownbutton-popup .k-menu-link,
.k-dropdownbutton-popup .k-link,
.k-popup .k-menu-link,
.k-popup .k-link {
    padding: 0;
    color: inherit;
}

/* ===================================================== */

/* Login page - DropDownList popup overrides
   The popup is rendered outside the component DOM (portaled),
   so scoped CSS cannot reach it. */
.form-dropdown-popup.k-animation-container .k-popup {
    background-color: #FFF !important;
    border: 1px solid #6E97C9 !important;
}

.form-dropdown-popup .k-list {
    background-color: #FFF !important;
    border: none !important;
}

.form-dropdown-popup .k-list-item.k-hover,
.form-dropdown-popup .k-list-item:hover {
    background-color: #F5F8FC !important;
}

.form-dropdown-popup .k-list-item.k-selected {
    background-color: #EAF1F9 !important;
    color: #1a1a1a !important;
}

/* Typography Classes */
.header-title {
    font-family: 'Manrope', sans-serif;
    font-size: 28px;
    font-weight: 600;
    line-height: 40px;
    color: #1f2937;
}

.section-title {
    font-family: 'Inter', sans-serif;
    font-size: 24px;
    font-weight: 600;
    line-height: 32px;
    color: #393939;
}

.body-text {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #393939;
}

/* Telerik Component Overrides */
.primarybuttonNew {
    cursor: pointer;
    display: inline-block;
    text-align: center;
    width: -webkit-fill-available;
    text-transform: none;
    line-height: initial;
    background-color: var(--primary-color, #0078D4) !important;
    border-color: var(--primary-color, #0078D4) !important;
}

.primarybuttonNew:hover {
    background-color: var(--secondary-color, #106EBE) !important;
    border-color: var(--secondary-color, #106EBE) !important;
}

.ds-login-prompt-button {
    --ds-outline-hover-bg: rgba(255, 255, 255, 0.2);
}

.ds-login-prompt-button:hover {
    background: rgba(255, 255, 255, 0.9) !important;
    color: #000000 !important;
}

/* ??????????????????????????????????????????????
   CPV Selection Dialog (global � Telerik renders at root)
   ?????????????????????????????????????????????? */

.cpv-selection-dialog .cpv-dialog-content {
    overflow-y: auto;
    max-height: 420px;
    padding: 0 4px;
}

.cpv-selection-dialog .cpv-dialog-subtitle {
    font-size: 0.875rem;
    color: #6b7280;
    margin: 0 0 14px;
    font-weight: 400;
}

.cpv-selection-dialog .cpv-dialog-empty {
    text-align: center;
    color: #adb5bd;
    padding: 2rem;
    font-style: italic;
}

.cpv-selection-dialog .cpv-selected-list {
    max-height: 380px;
    overflow-y: auto;
    border: 1px solid #d1d5db;
    border-radius: 6px;
}

.cpv-selection-dialog .cpv-selected-list-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid #e9ecef;
}

    .cpv-selection-dialog .cpv-selected-list-row:nth-child(odd) {
        background-color: #ffffff;
    }

    .cpv-selection-dialog .cpv-selected-list-row:nth-child(even) {
        background-color: #f9fafb;
    }

    .cpv-selection-dialog .cpv-selected-list-row:last-child {
        border-bottom: none;
    }

.cpv-selection-dialog .cpv-list-code {
    font-weight: 700;
    font-size: 0.875rem;
    color: #111827;
    min-width: 90px;
    white-space: nowrap;
}

.cpv-selection-dialog .cpv-list-name {
    font-size: 0.875rem;
    color: #374151;
    flex: 1;
}

/* Full-width accept button at bottom */
.cpv-selection-dialog .k-actions,
.cpv-selection-dialog .k-dialog-buttongroup {
    padding: 16px 24px !important;
    border-top: 1px solid #e5e7eb;
}

    .cpv-selection-dialog .k-actions .cpv-accept-btn,
    .cpv-selection-dialog .k-dialog-buttongroup .cpv-accept-btn {
        width: 100% !important;
        height: 44px;
        min-height: 44px;
        border-radius: 8px;
        gap: 8px;
        padding: 8px 16px;
        background: var(--Primary-Main, #006DC0) !important;
        border-color: var(--Primary-Main, #006DC0) !important;
        font-family: Inter, sans-serif;
        font-weight: 500;
        font-size: 14px;
        line-height: 24px;
        letter-spacing: -0.02em;
        color: var(--Surface-Color, #FFFFFF) !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

/* Confirm save dialog */
.cpv-confirm-dialog .cpv-confirm-body {
    text-align: center;
    padding: 16px;
}

.cpv-confirm-dialog .cpv-confirm-icon {
    color: #f59e0b;
    margin-bottom: 16px;
}
.toggle-view-buttons { display: flex; gap: 0.5rem; } .toggle-view-buttons button, .toggle-view-buttons [class*='ds-btn'] { cursor: pointer; }