/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    margin-top: 15px;
    padding-left: 15px;
    padding-right: 15px;
}

/* Set widths on the form inputs since otherwise they're 100% wide */
input,
select,
textarea {
    max-width: 280px;
}

/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
    .body-content {
        padding: 0;
    }
}

/* KuberForma dashboard module styles */

/* Muted info icon; the "Updated ..." stamp is shown via a Bootstrap popover (initialized in JS) */
.forma-info {
    color: #6c757d;
    cursor: help;
    font-size: .8em;
    font-weight: 400;
}

/* Kebab / gear menu trigger */
.forma-menu-btn {
    font-size: 1.25rem;
    line-height: 1;
}



/* KuberForma dashboard module styles */

/* Muted info icon; the "Refreshed ..." stamp shows via a Bootstrap popover (initialized in JS) */
.forma-info {
    color: #6c757d;
    cursor: help;
    font-size: .8em;
    font-weight: 400;
}

/* Kebab / gear menu trigger */
.forma-menu-btn {
    font-size: 1.25rem;
    line-height: 1;
}

/* On-demand refresh overlay: full-screen dim + blur, with a centered spinner + message */
.forma-refresh-overlay {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    background: rgba(255, 255, 255, .55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

    .forma-refresh-overlay .spinner-border {
        width: 3.5rem;
        height: 3.5rem;
        border-width: .35rem;
    }

    .forma-refresh-overlay .forma-refresh-msg {
        font-size: 1.1rem;
        font-weight: 600;
        color: #0d6efd; /* match the blue spinner */
        letter-spacing: .02em;
    }







/* ============================================================================
   KuberForma - selected submenu item + sidebar polish
   APPEND this block to the end of Content/forma.css.

   Selected sub-item reads as a lighter panel of the sidebar's own background
   (a translucent white overlay, so it tracks the theme) with brighter text.
   No left-edge accent bar. Scoped to treeview children; category rows untouched.
   ============================================================================ */
.app-sidebar .sidebar-menu .nav-treeview > .nav-item > .nav-link.active {
    background-color: rgba(255, 255, 255, .15) !important; /* lighter shade of the sidebar bg */
    color: #fff !important;
    font-weight: 600 !important;
    border-radius: .375rem;
}

    .app-sidebar .sidebar-menu .nav-treeview > .nav-item > .nav-link.active .nav-icon,
    .app-sidebar .sidebar-menu .nav-treeview > .nav-item > .nav-link.active p {
        color: #fff !important;
    }

/* Hover on a NON-selected child stays subtle, so only the chosen row looks chosen. */
.app-sidebar .sidebar-menu .nav-treeview > .nav-item > .nav-link:not(.active):hover {
    background-color: rgba(255, 255, 255, .06);
    border-radius: .375rem;
}

/* ----------------------------------------------------------------------------
   Sub-items: no icon, the label is indented so it starts under the category
   text, and trimmed ~2px. padding-left (not margin) keeps the selected-row
   highlight full-width. If a MenuIcon is ever supplied it is still centered.
   ---------------------------------------------------------------------------- */
.app-sidebar .sidebar-menu .nav-treeview > .nav-item > .nav-link {
    display: flex;
    align-items: center;
    padding-left: 2.5rem; /* lines the text up with the category label above */
    font-size: .875rem; /* ~14px: about 2px smaller than the default */
}

    .app-sidebar .sidebar-menu .nav-treeview > .nav-item > .nav-link > .nav-icon {
        line-height: 1;
        vertical-align: middle;
    }

    .app-sidebar .sidebar-menu .nav-treeview > .nav-item > .nav-link > p {
        margin-bottom: 0;
    }

/* Group caret (fa-angle-down): points down when collapsed, up when open.
   AdminLTE turns it 90 degrees on .menu-open; this turns it 180 instead. */
.app-sidebar .sidebar-menu .menu-open > .nav-link .nav-arrow {
    transform: translateY(-50%) rotate(180deg);
}


/* ============================================================================
   KuberForma - grid usability + row coloring.  APPEND to Content/forma.css.
   REPLACES the earlier forma-margin-colors.css block (row colors now key off a
   data attribute, not a class, so cells keep Grid.js's default padding/height).

   - Table scrolls horizontally inside .forma-grid instead of shrinking columns.
   - Headers show their full label on one line, with room for the sort caret so
     the label and caret never collide with the next column.
   - Row status tints: Margin % < 0 -> red, < 20 -> amber (set via data-forma).
   ============================================================================ */

/* Horizontal scroll: columns size to content; the panel scrolls rather than
   compressing headers into "Ord..." stubs. */
.forma-grid {
    overflow-x: auto;
}

    /* Content-sized columns (auto layout), each cell on one line; the panel scrolls
   horizontally when the table is wider than the screen. */
    .forma-grid .gridjs-table {
        table-layout: auto !important;
    }

    .forma-grid .gridjs-td,
    .forma-grid .gridjs-th {
        white-space: nowrap;
    }

    /* Header cell: reserve space on the right for Grid.js's sort caret so the label
   text and the caret can't overlap, and keep the label clipped to its own cell
   (never spilling into the neighbouring header). A floor width keeps short
   headers like "Line" / "Qty" from being squeezed under the caret. */
    .forma-grid .gridjs-th {
        position: relative;
        padding-right: 30px; /* caret lives here */
        min-width: 5rem;
    }

        .forma-grid .gridjs-th .gridjs-th-content {
            display: inline-block;
            width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis; /* only bites if a column is ever constrained */
        }
        /* Keep the sort caret pinned in the reserved gutter, vertically centred. */
        .forma-grid .gridjs-th .gridjs-sort {
            position: absolute;
            right: 8px;
            top: 50%;
            transform: translateY(-50%);
            margin: 0;
            padding: 0;
            width: 16px;
        }

    /* Row status coloring (data attribute preserves the default .gridjs-td styling). */
    .forma-grid td[data-forma="danger"] {
        background-color: rgba(220, 53, 69, .16) !important; /* red - negative margin */
    }

        .forma-grid td[data-forma="danger"]:first-child {
            box-shadow: inset 3px 0 0 rgba(220, 53, 69, .9); /* left danger bar */
        }

    .forma-grid td[data-forma="warn"] {
        background-color: rgba(255, 193, 7, .14) !important; /* amber - thin margin */
    }

/* Async grid: loading + error placeholders (shown by formaGridInitAsync before data lands). */
.forma-grid-loading {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 1.25rem .25rem;
    color: #6c757d; /* muted */
    font-size: .875rem;
}

.forma-grid-error {
    padding: 1rem .25rem;
}

/* ----------------------------------------------------------------------------
   Data entry forms (CAR, MRB): cards with class "forma-entry".
   The 280px cap at the top of this file is for dashboard filters; inside an
   entry form every field fills its column so text, date (with the calendar
   button) and money ($) fields all line up at the same width.
   ---------------------------------------------------------------------------- */
.forma-entry input,
.forma-entry select,
.forma-entry textarea {
    max-width: none;
}

/* CheckBoxList / RadioButtonList (RepeatLayout Flow): space the items out and center them. */
.forma-checklist input[type="checkbox"],
.forma-checklist input[type="radio"] {
    width: 1rem;
    height: 1rem;
    margin: 0 .4rem 0 0;
    vertical-align: middle;
}

.forma-checklist label {
    margin: 0 1.75rem 0 0;
    vertical-align: middle;
    font-size: .875rem;
}

/* ----------------------------------------------------------------------------
   QC section style (In-Process QC, 2026-10). A form is a stack of section
   cards: dark header bar with icon and title, fields in a 5 column grid with
   the label above the input, and a sticky action bar at the bottom.
   Only applies inside .qc-form, so CAR / NCR keep their current look.
   ---------------------------------------------------------------------------- */
.qc-form .qc-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

    .qc-form .qc-title h1 {
        font-size: 1.75rem;
        font-weight: 600;
        margin: 0;
    }

    .qc-form .qc-title .qc-subtitle {
        color: var(--bs-secondary-color);
        margin-top: .25rem;
    }

.qc-form .qc-title-meta {
    display: flex;
    align-items: center;
    gap: .75rem;
    white-space: nowrap;
}

.qc-section {
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
    margin-bottom: 1.25rem;
}

    .qc-section > .qc-section-header {
        display: flex;
        align-items: center;
        gap: .75rem;
        padding: .8rem 1.25rem;
        background-color: #2b3035;
        color: #fff;
        border-radius: calc(.5rem - 1px) calc(.5rem - 1px) 0 0;
    }

        .qc-section > .qc-section-header h2 {
            font-size: 1.1rem;
            font-weight: 600;
            margin: 0;
        }

        .qc-section > .qc-section-header .qc-section-icon {
            font-size: 1.15rem;
            opacity: .9;
        }

        .qc-section > .qc-section-header .qc-section-actions {
            margin-left: auto;
            display: flex;
            align-items: center;
            gap: .5rem;
        }

    .qc-section > .qc-section-body {
        padding: 1.25rem;
    }

.qc-subhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin: 1.5rem 0 .75rem;
    padding-bottom: .4rem;
    border-bottom: 1px solid var(--bs-border-color);
}

    .qc-subhead h3 {
        font-size: 1rem;
        font-weight: 600;
        margin: 0;
    }

/* Field grid: 5 columns on wide screens, 3 on laptops, 1 on phones. */
.qc-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1rem 1.25rem;
}

    .qc-grid .qc-span-2 {
        grid-column: span 2;
    }

    .qc-grid .qc-span-all {
        grid-column: 1 / -1;
    }

@media (max-width: 1199.98px) {
    .qc-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .qc-grid {
        grid-template-columns: minmax(0, 1fr);
    }

        .qc-grid .qc-span-2 {
            grid-column: auto;
        }
}

.qc-field > label {
    display: block;
    font-size: .875rem;
    font-weight: 600;
    margin-bottom: .35rem;
}

.qc-req {
    color: var(--bs-danger);
    margin-left: .15rem;
}

.qc-readonly {
    background-color: var(--bs-tertiary-bg);
    font-weight: 600;
    min-height: calc(1.5em + .75rem + 2px);
}

/* Checks: one tab per check (setup, in-run, last piece) plus the Add Check tab. */
.qc-check-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1.25rem;
}

    .qc-check-tabs .qc-tab {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        padding: .45rem .9rem;
        border: 1px solid var(--bs-border-color);
        border-radius: .4rem;
        background-color: var(--bs-body-bg);
        color: var(--bs-body-color);
        text-decoration: none;
        font-weight: 500;
    }

        .qc-check-tabs .qc-tab:hover {
            background-color: var(--bs-tertiary-bg);
        }

        .qc-check-tabs .qc-tab .qc-tab-no {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 1.6rem;
            height: 1.6rem;
            border-radius: 50%;
            background-color: var(--bs-secondary-bg);
            font-size: .8rem;
            font-weight: 700;
        }

        .qc-check-tabs .qc-tab.active {
            background-color: var(--bs-primary);
            border-color: var(--bs-primary);
            color: #fff;
        }

            .qc-check-tabs .qc-tab.active .qc-tab-no {
                background-color: #fff;
                color: var(--bs-primary);
            }

        .qc-check-tabs .qc-tab .qc-tab-dot {
            width: .55rem;
            height: .55rem;
            border-radius: 50%;
        }

    .qc-check-tabs .qc-tab-add {
        border-style: dashed;
        color: var(--bs-primary);
    }

/* Characteristics table */
.qc-table {
    margin-bottom: 0;
}

    .qc-table > thead > tr > th {
        background-color: var(--bs-tertiary-bg);
        font-size: .85rem;
        font-weight: 600;
        white-space: nowrap;
        vertical-align: bottom;
    }

    .qc-table > tbody > tr > td {
        vertical-align: middle;
    }

    .qc-table .qc-spec {
        text-align: center;
        font-variant-numeric: tabular-nums;
    }

    .qc-table .qc-measure {
        max-width: 9rem;
        font-variant-numeric: tabular-nums;
    }

    .qc-table > tbody > tr.qc-row-fail > td {
        background-color: var(--bs-danger-bg-subtle);
    }

/* Pass / Fail: pill for measured items, colored select for visual items. */
.qc-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .8rem;
    border-radius: 50rem;
    font-size: .85rem;
    font-weight: 600;
    white-space: nowrap;
}

.qc-pill-pass {
    background-color: var(--bs-success-bg-subtle);
    border: 1px solid var(--bs-success-border-subtle);
    color: var(--bs-success-text-emphasis);
}

.qc-pill-fail {
    background-color: var(--bs-danger);
    border: 1px solid var(--bs-danger);
    color: #fff;
}

.qc-pill-open {
    background-color: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
}

.qc-pf {
    min-width: 7.5rem;
    border-radius: 50rem;
    font-weight: 600;
}

    .qc-pf.qc-pf-pass {
        background-color: var(--bs-success-bg-subtle);
        border-color: var(--bs-success-border-subtle);
        color: var(--bs-success-text-emphasis);
    }

    .qc-pf.qc-pf-fail {
        background-color: var(--bs-danger);
        border-color: var(--bs-danger);
        color: #fff;
        --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    }

    .qc-pf.qc-pf-na {
        background-color: var(--bs-secondary-bg);
    }

/* Live summary in the Checks header */
.qc-summary {
    display: flex;
    gap: .4rem;
    font-size: .85rem;
}

    .qc-summary span {
        display: inline-flex;
        align-items: center;
        gap: .3rem;
        padding: .2rem .6rem;
        border-radius: 50rem;
        background-color: rgba(255, 255, 255, .12);
        white-space: nowrap;
    }

    .qc-summary b {
        font-size: .95rem;
    }

/* Sticky action bar */
.qc-actionbar {
    position: sticky;
    bottom: 0;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .85rem 1.25rem;
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, .06);
}

    .qc-actionbar .btn {
        min-width: 7rem;
    }

/* ----------------------------------------------------------------------------
   Main area background (whole project): light blue-grey so white cards stand out.
   ---------------------------------------------------------------------------- */
.app-main {
    background-color: #f4f6f9;
}

/* Pages in the QC section style carry their own title, so the master page
   heading ("Quality Control") is hidden on them. */
.app-main:has(.qc-form) > .app-content-header {
    display: none;
}

.app-main:has(.qc-form) > .app-content {
    padding-top: 1.25rem;
}

/* Section footer (list pages: Add button bottom right) */
.qc-section > .qc-section-footer {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    padding: .85rem 1.25rem;
    border-top: 1px solid var(--bs-border-color);
    background-color: var(--bs-tertiary-bg);
    border-radius: 0 0 calc(.5rem - 1px) calc(.5rem - 1px);
}

/* List grid in the same style: light header row, roomy rows, edge padding. */
.qc-list {
    margin-bottom: 0;
}

    .qc-list > thead > tr > th {
        background-color: var(--bs-tertiary-bg);
        font-size: .85rem;
        font-weight: 600;
        white-space: nowrap;
        padding-top: .7rem;
        padding-bottom: .7rem;
        border-bottom: 1px solid var(--bs-border-color);
    }

    .qc-list > tbody > tr > td {
        padding-top: .7rem;
        padding-bottom: .7rem;
        vertical-align: middle;
    }

    .qc-list > thead > tr > th:first-child,
    .qc-list > tbody > tr > td:first-child {
        padding-left: 1.25rem;
    }

    .qc-list > thead > tr > th:last-child,
    .qc-list > tbody > tr > td:last-child {
        padding-right: 1.25rem;
    }

    .qc-list a.qc-id {
        font-weight: 600;
        text-decoration: none;
        white-space: nowrap;
    }

        .qc-list a.qc-id:hover {
            text-decoration: underline;
        }

/* Status pills (list and page title) */
.qc-status {
    display: inline-block;
    padding: .25rem .7rem;
    border-radius: .35rem;
    border: 1px solid transparent;
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
}

.qc-status-pass {
    background-color: var(--bs-success-bg-subtle);
    border-color: var(--bs-success-border-subtle);
    color: var(--bs-success-text-emphasis);
}

.qc-status-fail {
    background-color: var(--bs-danger-bg-subtle);
    border-color: var(--bs-danger-border-subtle);
    color: var(--bs-danger-text-emphasis);
}

.qc-status-open {
    background-color: var(--bs-secondary-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-secondary-color);
}

.qc-status-new {
    background-color: var(--bs-primary-bg-subtle);
    border-color: var(--bs-primary-border-subtle);
    color: var(--bs-primary-text-emphasis);
}

.qc-status-void {
    background-color: var(--bs-dark);
    color: #fff;
}