/* ── 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: 1000;
}

    /* 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);
}