/* ── CSS Variables ───────────────────────────────────────── */
:root {
    --erp-primary: #2563EB;
    --erp-primary-d: #1D4ED8;
    --erp-accent: #0EA5E9;
    --erp-success: #16A34A;
    --erp-danger: #DC2626;
    --erp-body-bg: #F8FAFC;
    --erp-border: #E2E8F0;
    --erp-text: #1E293B;
    --erp-muted: #64748B;
}

*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    font-family: 'Inter', 'Roboto', sans-serif;
    font-size: 10pt;
    height: 100%;
    margin: 0;
    background-color: var(--erp-body-bg);
    color: var(--erp-text);
}
/*Start Login Page*/
.wallpaper {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 0;
}

.stretch {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.centerBox {
    position: relative;
    z-index: 1;
    background: rgba(255,255,255,.97);
    border-radius: 14px;
    box-shadow: 0 10px 40px rgba(0,0,0,.22);
    padding: 2rem 2.25rem;
    width: 430px;
    max-width: 96vw;
    text-align: center;
}

/*End Login Page*/
/*Layout Styles*/
.main {
    min-height: calc(100vh - 52px);
    background: var(--erp-body-bg);
}

/* Bootstrap 5 handles all col-* grid layout. Custom float-grid removed. */
.brd-all {
    border: 1px solid var(--erp-border);
    border-radius: 6px;
}
/*End Layout*/
/*Form and Inputs*/
.myform {
    padding: 8px;
    margin: 0 auto;
}

    .myform input, .myform select, .myform textarea {
        width: 100%;
    }

input[type=checkbox], input[type=radio] {
    height: 18px;
    width: 18px;
}

input, select, textarea {
    border: 1px solid #CBD5E1;
    border-radius: 6px;
    padding: 3px 8px;
    transition: border-color .15s, box-shadow .15s;
    background-color: #fff;
    font-family: inherit;
    font-size: inherit;
}

.focus {
    background-color: #EFF6FF;
    border: 2px solid var(--erp-primary) !important;
    transition: all 200ms ease-out;
    box-shadow: 0 0 0 3px rgba(37,99,235,.18);
}

/*input, select {
    line-height: 28px;
    height: 28px;
}*/

textarea {
    line-height: 16px;
}

.money {
    text-align: right;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--erp-primary);
    box-shadow: 0 0 0 3px rgba(37,99,235,.18);
    background-color: #FAFEFF;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

::-webkit-datetime-edit {
    padding: 0;
    line-height: 1.5;
}

::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
}

::-webkit-calendar-picker-indicator {
    opacity: 0.6;
    cursor: pointer;
    padding: 2px;
}

::-webkit-clear-button,
::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

label {
    font-size: 8pt;
    display: block;
    width: 100%;
    padding-top: 3px;
    padding-bottom: 2px;
    text-align: left;
    color: var(--erp-muted);
    font-weight: 500;
}
/*End Form and Inputs*/

.ajax__html_editor_extender_popupDiv {
    display: none;
}
/* Buttons */
input[type=submit],
input[type=button]:not(.ajax__html_editor_extender_button),
button:not(.dropbtn):not(.subdropbtn) {
    background: linear-gradient(135deg, var(--erp-primary), var(--erp-primary-d));
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 5px 18px;
    cursor: pointer;
    font-size: 10pt;
    font-family: inherit;
    transition: opacity .15s, transform .1s;
    box-shadow: 0 2px 6px rgba(37,99,235,.3);
}

    input[type=submit]:hover,
    input[type=button]:not(.ajax__html_editor_extender_button):hover,
    button:not(.dropbtn):not(.subdropbtn):hover {
        opacity: .88;
        transform: translateY(-1px);
    }

    input[type=submit]:active, input[type=button]:active {
        transform: translateY(0);
    }

/*Colors*/
.bg_color1, .bg_purple {
    background-color: #44206B;
    color: white;
}

.bg_color2, .bg_orange {
    background-color: #F17D30;
    color: white;
}

.bg_color3, .bg_pink {
    background-color: #E051B0;
    color: white;
}

.bg_color4, .bg_red_dull {
    background-color: #E8572E;
    color: white;
}

.bg_color5, .bg_green_dull {
    background-color: #51BCBA;
    color: white;
}

.bg_color6, .bg_purple_light {
    background-color: #8D73C1;
    color: white;
}

.bg_color7, .bg_green_light {
    background-color: #67D872;
    color: black;
}

.bg_color8, .bg_cyan {
    background-color: #4BC4FA;
    color: black;
}

.bg_color9, .bg_yellow {
    background-color: #FACF33;
    color: black;
}

.bg_color0, .bg_maroon {
    background-color: #7E2117;
    color: white;
}

.bg_red {
    background: linear-gradient(135deg, #DC2626, #B91C1C) !important;
    color: white;
    box-shadow: 0 2px 8px rgba(220,38,38,.35) !important;
}

    .bg_red:hover {
        background: linear-gradient(135deg, #B91C1C, #991B1B) !important;
    }

.bg_green {
    background: linear-gradient(135deg, #16A34A, #15803D) !important;
    color: white;
    box-shadow: 0 2px 8px rgba(22,163,74,.35) !important;
}

    .bg_green:hover {
        background: linear-gradient(135deg, #15803D, #166534) !important;
    }

.bg_blue {
    background: linear-gradient(135deg, #2563EB, #1D4ED8) !important;
    color: white;
    box-shadow: 0 2px 8px rgba(37,99,235,.35) !important;
}

    .bg_blue:hover {
        background: linear-gradient(135deg, #1D4ED8, #1E40AF) !important;
    }

.bg_gray {
    background-color: #F1F5F9;
    color: black;
}

.red {
    color: #DC2626;
}

.green {
    color: #16A34A;
}

.blue {
    color: #2563EB;
}

.orange {
    color: #FF9D35;
}
/*End Colors*/
/* Tables*/
table.dataTable thead {
    background: linear-gradient(90deg, var(--erp-primary), var(--erp-accent));
    color: white;
}

    table.dataTable thead th {
        text-align: left;
        font-weight: 500;
    }

table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

    table.tbl thead {
        background: linear-gradient(90deg, var(--erp-primary), var(--erp-accent));
        color: white;
    }

        table.tbl thead th {
            padding: 9px 6px;
            font-weight: 500;
            border-bottom: 1px solid var(--erp-border);
            text-align: left;
        }

    table.tbl td {
        padding: 6px 4px;
        border-bottom: 1px solid var(--erp-border);
    }

    table.tbl tbody tr:hover {
        background: #EFF6FF;
    }

    table.tbl tr:nth-child(even) {
        background: #F8FAFC;
    }

    table.entry th {
        font-size: 10pt;
        text-align: right;
        font-weight: normal;
        padding-right: 10px;
        white-space: nowrap;
        color: var(--erp-muted);
    }

    table.entry td {
    }

/* End Tables*/
/* Text and Headings*/
h1 {
    background: linear-gradient(135deg, var(--erp-primary) 0%, var(--erp-accent) 100%);
    font-size: 14pt;
    color: white;
    text-align: left;
    padding: 10px 18px;
    margin: 0 0 14px 0;
    font-weight: 600;
    border-radius: 8px;
    letter-spacing: .01em;
}

    h1.entry {
        text-align: center;
        border-radius: 10px 10px 0 0;
        margin: 0 auto;
    }

h2 {
    font-size: 15pt;
    padding: 10px 16px;
    margin: 0 0 10px 0;
    font-weight: 600;
    color: var(--erp-text);
    border-left: 4px solid var(--erp-primary);
    background: #EFF6FF;
    border-radius: 0 6px 6px 0;
}

.f24 {
    font-size: 24pt;
}

.f20 {
    font-size: 20pt;
}

.f18 {
    font-size: 18pt;
}

.f16 {
    font-size: 16pt;
}

.f14 {
    font-size: 14pt;
}

.f12 {
    font-size: 12pt;
}

.f11 {
    font-size: 11pt;
}

.f10 {
    font-size: 10pt;
}

.f8 {
    font-size: 8pt;
}

/* ── Details / Card Sections ─────────────────────────────── */
details.pg_details {
    background: #fff;
    border: 1px solid var(--erp-border);
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    margin: 0 auto 14px auto;
    overflow: hidden;
    padding: 14px 16px;
}

    details.pg_details > summary {
        font-size: 10.5pt;
        font-weight: 600;
        color: #fff;
        background: linear-gradient(90deg, var(--erp-primary), var(--erp-accent));
        padding: 9px 16px;
        cursor: pointer;
        list-style: none;
        display: flex;
        align-items: center;
        gap: 8px;
        user-select: none;
    }

        details.pg_details > summary::after {
            content: '\f078';
            font-family: 'Font Awesome 6 Free';
            font-weight: 900;
            font-size: 9pt;
            margin-left: auto;
            transition: transform .2s;
        }

    details.pg_details[open] > summary::after {
        transform: rotate(180deg);
    }

    details.pg_details > summary::-webkit-details-marker {
        display: none;
    }

    details.pg_details .myform {
        padding: 14px 16px 10px 16px;
    }

details {
    padding: 5px;
    margin: 0 auto;
}

summary {
    font-size: 14pt;
}

hr {
    border: none;
    border-top: 1px solid var(--erp-border) !important;
    margin: 8px 10px;
    clear: both;
}

.rt {
    text-align: right !important;
}

.lt {
    text-align: left !important;
}

.cn {
    text-align: center !important;
}

.b {
    font-weight: bold !important;
}

.u {
    text-decoration: underline !important;
}

/* End Text and Headings*/

/*Animations*/
.blink {
    animation: blink-animation 1s steps(5, start) infinite;
    -webkit-animation: blink-animation 1s steps(5, start) infinite;
}

@keyframes blink-animation {
    to {
        visibility: hidden;
    }
}

@-webkit-keyframes blink-animation {
    to {
        visibility: hidden;
    }
}

/*End Animations*/
a:link i {
    padding: 0 3px;
}

.hide {
    display: none;
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    background-color: black;
    z-index: 99;
    opacity: 0.5;
    filter: alpha(opacity=5);
    -moz-opacity: 0.5;
    min-height: 100%;
    width: 100%;
}

.loading {
    font-size: 10pt;
    border: 4px solid var(--erp-accent);
    border-radius: 10px;
    width: 200px;
    height: 100px;
    display: none;
    position: fixed;
    background-color: White;
    z-index: 999;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0,0,0,.15);
}

pre, .pre {
    white-space: pre-wrap; /* Since CSS 2.1 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}

.ur {
    direction: rtl;
    font-family: Nafees;
}

.popup {
    box-shadow: 0 0 24px rgba(37,99,235,.35);
    border-radius: 10px;
    width: 200px;
    height: 100px;
    display: none;
    position: fixed;
    background-color: White;
    z-index: 999;
}

#popframe {
    width: 100%;
    height: 100%;
    border: none;
}

#popmsg {
    height: 100px;
    text-align: center;
    display: none;
    font-size: 14pt;
}

    #popmsg table, #popmsg table tr {
        width: 100%;
        height: 100px;
    }

    #popmsg td {
        vertical-align: middle;
        height: 100px;
    }

#expboxclose {
    top: -16px;
    right: -16px;
    position: absolute;
    font-size: 32px;
    border-radius: 50%;
    cursor: pointer;
    background: #fff;
}

.je tr th:nth-child(1) {
    text-align: left;
}

.je tr th:nth-child(2), .je tr th:nth-child(3), .je tr td:nth-child(2), .je tr td:nth-child(3) {
    text-align: right;
}

.je tfoot th {
    font-weight: bold;
}

.summarybar {
    background: linear-gradient(90deg, #0F172A, #1E293B);
    margin: 0 auto 14px auto;
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    line-height: 1.4;
    border-radius: 8px;
    padding: 6px 8px;
    gap: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
    position: relative;
    z-index: 998;
}

    /* Override topnav.css float:left so flex layout works */
    .summarybar a,
    .summarybar .sb-item,
    .topnav.summarybar a {
        float: none !important;
        display: inline-flex !important;
        align-items: center;
        gap: 6px;
        height: auto;
        min-height: 34px;
        padding: 4px 10px;
        color: #E2E8F0 !important;
        font-size: 9.5pt;
        font-weight: 500;
        border-radius: 6px;
        white-space: nowrap;
        text-decoration: none;
        border-bottom: none !important;
        flex-shrink: 0;
    }

        /* Label text spans inside summarybar items */
        .summarybar a span.sb-label,
        .summarybar .sb-item span.sb-label {
            color: #94A3B8;
            font-size: 8.5pt;
            font-weight: 400;
            white-space: nowrap;
        }

        .summarybar a i,
        .summarybar .sb-item i {
            color: #7DD3FC;
            font-size: 9.5pt;
            flex-shrink: 0;
        }

        .summarybar a input[type=text],
        .summarybar a input[type=date],
        .summarybar a input[type=number],
        .summarybar a select,
        .summarybar .sb-item input[type=text],
        .summarybar .sb-item input[type=date],
        .summarybar .sb-item input[type=number],
        .summarybar .sb-item select {
            margin: 0;
            height: 30px;
            padding: 2px 8px;
            font-size: 9pt;
            border: 1px solid #334155;
            border-radius: 5px;
            background: #1E293B;
            color: #E2E8F0;
            outline: none;
            transition: border-color .15s;
        }

            .summarybar a input[type=text]:focus,
            .summarybar a input[type=date]:focus,
            .summarybar a input[type=number]:focus,
            .summarybar a select:focus,
            .summarybar .sb-item input[type=text]:focus,
            .summarybar .sb-item input[type=date]:focus,
            .summarybar .sb-item input[type=number]:focus,
            .summarybar .sb-item select:focus {
                border-color: var(--erp-accent);
                background: #0F172A;
            }

        .summarybar a input[type=submit],
        .summarybar a input[type=button],
        .summarybar .sb-item input[type=submit],
        .summarybar .sb-item input[type=button] {
            height: 30px;
            padding: 0 14px;
            font-size: 9pt;
            font-weight: 600;
            margin: 0;
            background: linear-gradient(135deg, var(--erp-primary), var(--erp-accent));
            color: #fff !important;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            transition: opacity .15s;
        }

            .summarybar a input[type=submit]:hover,
            .summarybar a input[type=button]:hover,
            .summarybar .sb-item input[type=submit]:hover,
            .summarybar .sb-item input[type=button]:hover {
                opacity: .88;
            }

        /* New / action links (e.g. "+ New Purchase Order") */
        .summarybar a[href]:not([href="javascript:void(0);"]) {
            background: rgba(37,99,235,.25);
            border: 1px solid rgba(37,99,235,.45);
            color: #93C5FD !important;
            padding: 4px 12px;
            transition: background .15s;
        }

            .summarybar a[href]:not([href="javascript:void(0);"]):hover {
                background: var(--erp-primary);
                color: #fff !important;
            }

        /* Mobile toggle icon — hidden on desktop */
        .summarybar a.icon {
            background: transparent !important;
            border: none !important;
            color: #94A3B8 !important;
            padding: 4px 8px;
            display: none !important;
            flex-shrink: 0;
        }

        .topnav.summarybar a:hover,
        .topnav.summarybar .sb-item:hover {
            background-color: rgba(255,255,255,.07);
        }

/* ── Mobile-first: summarybar collapses on small screens ─── */
@media (max-width: 767px) {
    .summarybar {
        padding: 4px 6px;
        gap: 3px;
    }

        /* Show toggle icon, pinned to top-right corner always */
        .summarybar a.icon {
            display: inline-flex !important;
            position: absolute !important;
            top: 5px;
            right: 6px;
            margin: 0;
            z-index: 2;
            min-height: 32px;
            width: 34px;
            justify-content: center;
        }

        /* Collapsed: leave space on right for the icon, hide filter items */
        .summarybar:not(.responsive) {
            padding-right: 46px;
            min-height: 44px;
            align-items: center;
        }

            .summarybar:not(.responsive) a:not(.icon),
            .summarybar:not(.responsive) .sb-item {
                display: none !important;
            }

        /* Expanded: stack items vertically, pad top so first item clears the icon */
        .summarybar.responsive {
            flex-direction: column;
            align-items: stretch;
            padding-top: 44px;
            padding-right: 46px;
        }

            .summarybar.responsive a,
            .summarybar.responsive .sb-item {
                width: 100%;
                justify-content: flex-start;
                border-radius: 5px;
                padding: 6px 10px;
            }

                .summarybar.responsive a input[type=text],
                .summarybar.responsive a input[type=date],
                .summarybar.responsive a input[type=number],
                .summarybar.responsive a select,
                .summarybar.responsive .sb-item input[type=text],
                .summarybar.responsive .sb-item input[type=date],
                .summarybar.responsive .sb-item input[type=number],
                .summarybar.responsive .sb-item select {
                    flex: 1;
                    min-width: 0;
                    width: 100%;
                }

        /* Keep Select2 dropdown visible above summarybar on mobile */
        .summarybar .select2-container {
            min-width: 140px;
            flex: 1;
        }

        /* Prevent summarybar from collapsing when Select2 dropdown is open */
        .summarybar.responsive .select2-container--open ~ * {
            display: flex !important;
        }
}

/* ── Totals card (PO_D, SE_D, …) ──────────────────────────────── */
.totals-card {
    background: #F8FAFC;
    border: 1px solid var(--erp-border);
    border-radius: 8px;
    overflow: hidden;
}

    .totals-card table {
        margin: 0;
    }

        .totals-card table tr th {
            font-size: 9pt;
            color: var(--erp-muted);
            font-weight: 600;
            text-align: right;
            padding: 6px 10px;
            white-space: nowrap;
            border-bottom: 1px solid var(--erp-border);
        }

        .totals-card table tr td {
            padding: 6px 10px;
            border-bottom: 1px solid var(--erp-border);
        }

        .totals-card table tr:last-child th,
        .totals-card table tr:last-child td {
            font-weight: 700;
            font-size: 11pt;
            background: #EFF6FF;
            color: var(--erp-primary);
            border-bottom: none;
        }

/* ── Action-row footer (PO_D, SE_D, …) ────────────────────────── */
.action-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 16px;
    margin: 12px -16px -14px -16px;
    background: linear-gradient(90deg, #F8FAFC, #EFF6FF);
    border-top: 1px solid var(--erp-border);
    border-radius: 0 0 10px 10px;
}

    .action-row .action-info {
        flex: 1;
        min-width: 0;
        font-size: 9pt;
        color: var(--erp-muted);
    }

    .action-row .action-btns {
        display: flex;
        gap: 8px;
        align-items: center;
        flex-wrap: wrap;
    }

        .action-row .action-btns input[type=submit] {
            min-width: 100px;
            width: auto !important;
            height: 36px;
            padding: 0 20px;
            font-size: 10pt;
            font-weight: 600;
            letter-spacing: .02em;
            border-radius: 7px;
            border: none;
            cursor: pointer;
            transition: opacity .15s, transform .1s, box-shadow .15s;
        }

            .action-row .action-btns input[type=submit]:hover {
                opacity: .92;
                transform: translateY(-1px);
            }

            .action-row .action-btns input[type=submit]:active {
                transform: translateY(0);
                box-shadow: none !important;
            }

@media (max-width: 576px) {
    .action-row {
        flex-direction: column;
        align-items: stretch;
    }

        .action-row .action-btns {
            justify-content: stretch;
        }

            .action-row .action-btns input[type=submit] {
                flex: 1;
                width: 100% !important;
                min-width: 0;
            }
}

/* ── tfoot add-row button inside detail tables ─────────────────── */
.pg_details .tbl tfoot td input[type=button] {
    background: linear-gradient(135deg, var(--erp-primary), var(--erp-accent));
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 3px 10px;
    font-size: 13px;
    cursor: pointer;
}

@media (max-width: 576px) {
    /* Bootstrap 5 handles col-* stacking; custom overrides removed */
    .no-mobile {
        display: none !important;
    }
}

@media print {
    .no-print {
        display: none !important;
    }

    input, textarea, select {
        border: none;
    }

    .page-break {
        display: block;
        page-break-before: always;
    }
}

.bb {
    cursor: pointer;
    color: var(--erp-primary);
}
/* Bill File Attachments Widget */
.bf_panel {
    border: 1px solid var(--erp-border);
    border-radius: 6px;
    padding: 10px 12px;
    background: #fff;
    margin-bottom: 10px;
}

.bf_title {
    font-weight: 600;
    color: var(--erp-primary);
    margin-bottom: 8px;
    font-size: 9.5pt;
}

.bf_list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
    min-height: 36px;
}

.bf_none {
    color: var(--erp-muted);
    font-size: 9pt;
    align-self: center;
}

.bf_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 90px;
    position: relative;
    border: 1px solid var(--erp-border);
    border-radius: 5px;
    padding: 6px 4px 4px;
    background: var(--erp-body-bg);
}

.bf_thumb {
    width: 78px;
    height: 60px;
    object-fit: cover;
    border-radius: 3px;
    border: 1px solid var(--erp-border);
}

.bf_pdf-icon {
    font-size: 36px;
    color: var(--erp-danger);
    height: 60px;
    line-height: 60px;
}

.bf_name {
    font-size: 7.5pt;
    color: var(--erp-text);
    max-width: 82px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    margin-top: 3px;
}

.bf_date {
    font-size: 7pt;
    color: var(--erp-muted);
    text-align: center;
}

.bf_del {
    position: absolute;
    top: 2px;
    right: 3px;
    font-size: 9pt;
    color: var(--erp-danger);
    cursor: pointer;
}

    .bf_del:hover {
        color: darkred;
    }

.bf_upload {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

    .bf_upload input[type=file] {
        flex: 1;
        min-width: 0;
        font-size: 9pt;
    }

.bf_btn {
    background: var(--erp-primary);
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 4px 12px;
    cursor: pointer;
    font-size: 9pt;
    white-space: nowrap;
}

    .bf_btn:hover {
        background: var(--erp-primary-d);
    }

.bf_icon-indicator {
    color: var(--erp-primary);
    margin-left: 2px;
    font-size: 9pt;
}
/* End Bill File Attachments Widget */

span.select2-dropdown.select2-dropdown--below, span.select2-dropdown.select2-dropdown--above {
    min-width: 250px !important;
}

.col-g1 {
    width: 8.33333%
}

.col-g2 {
    width: 16.66666%
}

.col-g3 {
    width: 24.99999%
}

.col-g4 {
    width: 33.33333%
}

.col-g5 {
    width: 41.66666%
}

.col-g6 {
    width: 49.99999%
}

.col-g7 {
    width: 58.33333%
}

.col-g8 {
    width: 66.66666%
}

.col-g9 {
    width: 74.99999%
}

.col-g10 {
    width: 83.33333%
}

.col-g11 {
    width: 91.66666%
}

.col-g12 {
    width: 99.99999%
}