/*====================================== OCR MAIN PAGE =================================*/

.ocr-main-page {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    align-items: stretch;
    height: calc(100vh - 9.75rem);
}

/*====================================== END OF OCR MAIN PAGE =================================*/


/*====================================== OCR PILLS =================================*/
.ocr-default-pill {
    padding: 0.1875rem 0.375rem 1px 0.375rem;
    width: fit-content;
    border: 1px solid var(--secondary) !important;
    border-radius: 0.625rem;
    background: #EFF2FB;
    color: var(--secondary);
    font-size: 0.875rem !important;
    height: 1.5rem;
    align-content: center;
}
.ocr-default-pill.quality {
    width: 4.6875rem;
    text-align: center;
}

.ocr-default-pill.quality.green{
    background: #28a745;
    border-color: #28a745 !important;
    color: var(--white);
    
}

.ocr-default-pill.quality.orange{
    background: #fd7e14;
    border-color: #fd7e14 !important;
    color: var(--white);

}

.ocr-default-pill.quality.red{
    background: #dc3545;
    border-color: #dc3545 !important;
    color: var(--white);

}

.ocr-default-pill.state {
    width: 4.6875rem;
    text-align: center;
}

.ocr-default-pill.state.created{
    background: #00d0ff;
    border-color: #00d0ff !important;
    color: var(--white);

}

.ocr-default-pill.state.verified{
    background: #478f3c;
    border-color: #478f3c !important;
    color: var(--white);

}
/*====================================== END OF OCR PILLS =================================*/


/*====================================== OCR RAG =================================*/

.abena-rag-group {
    display: inline-flex;
    gap: 2px;
}

.abena-rag-group .abena-rag-btn {
    min-width: 28px;
    padding: 2px 6px;
    border-radius: 9999px;
    border-width: 1px;
    line-height: 1;
}

.abs-grid .abena-rag-group .k-button-solid-base {
    background-color: initial !important;
    border: initial !important;
    color: inherit !important;
}

.abena-rag-group .rag-red,  .abs-grid .abena-rag-group .k-button-solid-base.rag-red{ 

    border-color: #dc2626; 
    color: #ef4444; 
}

.abena-rag-group .rag-amber { 

    border-color: #d97706; 
    color: #f59e0b; 
}

.abena-rag-group .rag-green {
    border-color: #16a34a;
    color: #22c55e; 
}

.rag-selected.k-button-solid-base:focus { box-shadow: 0 0 0 0; !important; }

.abena-rag-group .rag-red.k-selected, .rag-red.rag-selected {
    background-color: #ef4444;
    border-color: #ef4444;
    color: #fff;
}

.abena-rag-group .rag-amber.k-selected, .rag-amber.rag-selected {
    background-color: #f59e0b;
    border-color: #f59e0b;
    color: #fff;
}

.abena-rag-group .rag-green.k-selected, .rag-green.rag-selected {
    background-color: #22c55e;
    border-color: #22c55e;
    color: #fff;
}


.abena-rag-group .rag-red   { --rag-bg:#ef4444; --rag-border:#dc2626; --rag-fg:#ef4444; }
.abena-rag-group .rag-amber { --rag-bg:#f59e0b; --rag-border:#d97706; --rag-fg:#f59e0b; }
.abena-rag-group .rag-green { --rag-bg:#22c55e; --rag-border:#16a34a; --rag-fg:#22c55e; }

.abs-grid .k-grid .abena-rag-group.abena-rag-in-grid .k-button.abena-rag-btn {
    color: var(--rag-fg) !important;
    min-width: 28px;
    padding: 2px 6px;
    border-radius: 9999px;
    border-width: 1px;
    line-height: 1;
}

.abs-grid .k-grid .abena-rag-group.abena-rag-in-grid .k-button.abena-rag-btn .k-button-icon {
    color: inherit !important;
    font-size: 14px !important;
}

.abs-grid .k-grid .abena-rag-group.abena-rag-in-grid .k-button.abena-rag-btn.rag-selected,
.abs-grid .k-grid .abena-rag-group.abena-rag-in-grid .k-button.abena-rag-btn.k-selected {
    box-shadow: 0 0 0 0; !important;
}

.abs-grid .k-grid .abena-rag-group.abena-rag-in-grid .k-button.abena-rag-btn.rag-selected,
.abs-grid .k-grid .abena-rag-group.abena-rag-in-grid .k-button.abena-rag-btn.k-selected {
    background-color: var(--rag-bg) !important;
    border-color: var(--rag-border) !important;
    color: #fff !important;
}

.abs-grid .k-grid .abena-rag-group .k-button.abena-rag-btn {
    border: 1px solid var(--rag-border) !important;
    color: var(--rag-fg) !important;
}
.abs-grid .k-grid .abena-rag-group .k-button.abena-rag-btn .k-button-icon {
    color: inherit !important; font-size: 14px !important;
}


.rag-widget {
    display: flex;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
}

.rag-btn {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    cursor: pointer;
    border: 1px solid #ccc;
    background: white;
    color: #aaa;
    transition: all 0.2s ease;
}

.rag-btn .fa-thumbs-down{
    transform: scaleX(-1);
}

.rag-btn i{
    font-size: 0.625rem;
}

/* Hover effect */
.rag-btn:hover {
    transform: scale(1.1);
}

/* Active States */
.rag-btn.active.red {
    background: #dc3545;
    color: white;
    border-color: #dc3545;
    box-shadow: 0 0 0.25rem #dc354580;
}

.rag-btn.active.amber {
    background: #fd7e14;
    color: white;
    border-color: #fd7e14;
    box-shadow: 0 0 0.25rem #fd7e1480;
}

.rag-btn.active.green {
    background: #28a745;
    color: white;
    border-color: #28a745;
    box-shadow: 0 0 0.25rem #28a74580;
}


/*====================================== END OF OCR RAG =================================*/


/*====================================== OCR ORDER VERIFICATION PAGE =================================*/

/* The page chrome is reserved in one place: .abs-page's own padding/margin are
   declared as variables here, and .ocr-main-page subtracts exactly those (plus the
   top bar) from 100vh. Keeping both sides of the sum in the same block is what stops
   the PDF viewer and the grid from stopping short of the bottom of the window - they
   size off this height, so a constant that over-reserves shows up as dead space. */
.abs-page:has(.ocr-order-verification-page) {
    --ocr-page-pad-top: 0.75rem;
    --ocr-page-pad-bottom: 0.5rem;
    --ocr-page-margin-bottom: 0.5rem;
    padding: var(--ocr-page-pad-top) 1.25rem var(--ocr-page-pad-bottom);
    margin: 0 1.25rem var(--ocr-page-margin-bottom);
}

/* Scoped to the verification overlay: the plain OCR list page keeps its own height. */
.ocr-main-page:has(.ocr-order-verification-page) {
    height: calc(100vh - var(--top-bar-height)
                 - var(--ocr-page-pad-top)
                 - var(--ocr-page-pad-bottom)
                 - var(--ocr-page-margin-bottom));
}

.ocr-order-verification-page {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    /* The absolutely positioned wrapper around this page is already k-h-full, so
       100% resolves against .ocr-main-page's calc above. */
    height: 100%;

    /* Section header icon: the circle is sized to the .h3 font-size (not its line
       box) so it reads as part of the title, with the glyph smaller again inside it.
       Tracks the responsive .h3 font-sizes in Abena-typography.css. */
    --ocr-header-icon-size: 1.125rem;
}

.ocr-order-verification-page .home-page-module .home-page-module-content .header-icon {
    width: var(--ocr-header-icon-size);
    height: var(--ocr-header-icon-size);
    border-radius: 50%;
    flex-shrink: 0;
}

.ocr-order-verification-page .home-page-module .home-page-module-content .header-icon i {
    font-size: calc(var(--ocr-header-icon-size) * 0.5);
    line-height: 1;
}

/* The comment box is boxed in by two shared rules: .abs-textarea-large sets a 10rem
   min-height floor and the component's own !k-h-20 utility sets a 5rem height, both
   !important. Both are far taller than this panel needs and push the articles grid
   down, so pin the height here - this selector is more specific than either.
   Only the outer box gets the fixed height: it is border-box with a 1px border, so
   its content box is 2px shorter. Pinning the inner textarea to the same 4rem made it
   overflow that content box by 2px and show a scrollbar on an empty comment - the
   textarea fills the box instead. */
.ocr-order-verification-page .module-contact .abs-textarea-large,
.ocr-order-verification-page .module-contact .abs-textarea-large .k-textarea {
    min-height: 4rem !important;
    height: 4rem !important;
}

/* The global form reset gives textareas line-height 1.5rem; tighter suits this
   short comment box and fits a third line in the same 4rem. */
.ocr-order-verification-page .module-contact .abs-textarea-large textarea {
    min-height: 0 !important;
    height: 100% !important;
    line-height: 1.25rem;
}

/* AbsTextArea puts an inline min-height (6rem here) on its outer wrapper as a shared
   default. That is taller than the 4rem box above, so it padded the comment card with
   32px of empty space. Inline styles need !important to beat. Scoped via the
   ocr-comment-textarea hook so the other 30+ AbsTextArea usages keep the default. */
.ocr-order-verification-page .ocr-comment-textarea {
    min-height: 0 !important;
}

/* The action row that used to sit under the title is gone - its buttons now render in the
   global top bar - so the content fills whatever the page leaves it. */
.ocr-order-verification-page .k-ocr-order-verification-content {
    flex: 1 1 auto;
    min-height: 0;
}

/* Left column: order info card stacked above the PDF viewer, which takes the remaining height. */
.ocr-order-verification-page__left {
    width: 40rem;
    flex-shrink: 0;
    min-height: 0;
}

.ocr-order-verification-page__pdf {
    flex: 1 1 auto;
    min-height: 0;
}

/* Right column: sold-to/ship-to row, comment row, then the articles grid. */
.ocr-order-verification-page__main {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
}

/* The sold-to/ship-to picker now sits on the section header row instead of a
   full-width column. TelerikComboBox is Width="100%", which in a flex row resolves to
   its content - an unselected (empty) picker collapsed to ~55px, leaving no room to
   type a filter. Give it a definite width; the results popup keeps its own 30rem below. */
.ocr-order-verification-page .ocr-customer-picker {
    width: 9rem;
    flex-shrink: 0;
}

.k-list-container:has(.ocr-customer-item),
.k-list-container:has(.ocr-material-item){
    width: 30rem;
}
.k-list-container:has(.ocr-unit-item){
    width: 24rem;
}

.ocr-preview-tooltip {
    transform: translateX(10rem);
}



/* .h3 drops to 12.6px / 11.25px font-size at these widths (Abena-typography.css),
   so the circle follows it down. */
@media (max-width: 1366px) {
    .ocr-order-verification-page {
        --ocr-header-icon-size: 12.6px;
    }
}

@media (-webkit-device-pixel-ratio: 1.75), (max-width: 1080px) {
    .ocr-order-verification-page {
        --ocr-header-icon-size: 11.25px;
    }
}

/*====================================== END OF OCR ORDER VERIFICATION PAGE =================================*/