@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap');

/* ═══════════════════════════════════════════
   GLOBAL RESET & FONT
═══════════════════════════════════════════ */
* {
    box-sizing: border-box;
    font-family: 'Montserrat', Arial, sans-serif !important;
    font-size: 14px;
}

body, input, button, select, textarea, label,
.ui-widget, .ui-widget input, .ui-widget select,
.ui-widget textarea, .ui-widget button {
    font-family: 'Montserrat', Arial, sans-serif !important;
}

body {
    background: #f0f2f5 !important;
    margin: 0;
    padding: 0;
}

tr {
    display: table-row;
    vertical-align: top;
    border-color: inherit;
}

/* ═══════════════════════════════════════════
   MAIN FORM CONTAINER
═══════════════════════════════════════════ */
.clsMainFrom {
    border: none;
    width: 1100px;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(31,58,95,0.10);
    border: 1px solid #dde3ed;
    overflow: hidden;
    margin: 16px 16px;
}
.clsMainFromNew {
    border: none;
    width: 1170px;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(31,58,95,0.10);
    border: 1px solid #dde3ed;
    overflow: hidden;
    margin: 16px 16px;
}
.clsLikeMainFromWidth {
    width: 1100px;
}
#TransactionForm {
    width: 1100px;
}
.clsGridApprove {
    width: 1100px;
}

/* ═══════════════════════════════════════════
   PAGE TITLE HEADER BAR
═══════════════════════════════════════════ */
.clsGridMainHeader {
    width: 1100px;
    background: linear-gradient(135deg, #1F3A5F 0%, #2a5090 100%);
    padding: 0 16px;
    min-height: 44px;
    display: table;
}
.clsGridMainHeaderChild {
    width: 1060px;
    background: linear-gradient(135deg, #1F3A5F 0%, #2a5090 100%);
    padding: 0 12px;
    min-height: 44px;
}
.clsLabelTop {
    color: #ffffff;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    display: inline-block;
    padding: 12px 0;
}

/* ═══════════════════════════════════════════
   INPUT AREA
═══════════════════════════════════════════ */
.clsGridMainInput {
    width: 1100px;
    background: #ffffff;
    padding: 14px 16px;
}

/* ═══════════════════════════════════════════
   COMMAND BUTTON BAR
═══════════════════════════════════════════ */
.clsGridMainCommands {
    width: 1100px;
    background: linear-gradient(135deg, #1F3A5F 0%, #2a5090 100%);
    padding: 6px 12px;
}
.clsGridMainCommandsChild {
    width: 1060px;
    background: linear-gradient(135deg, #1F3A5F 0%, #2a5090 100%);
    padding: 6px 10px;
}
.clsGridMainCommands1 {
    width: 395px;
    background: linear-gradient(135deg, #1F3A5F 0%, #2a5090 100%);
    padding: 4px 6px;
}
.clsGridMainCommands2 {
    width: 395px;
    background: linear-gradient(135deg, #1F3A5F 0%, #2a5090 100%);
    padding: 4px 6px;
}

/* ═══════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════ */
.clsButton {
    width: 100px;
    height: 32px;
    background: linear-gradient(135deg, #1F3A5F 0%, #2a5090 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    cursor: pointer;
    transition: background 0.15s;
}
.clsButton:hover {
    background: linear-gradient(135deg, #162c4a 0%, #1F3A5F 100%) !important;
}
.clsButtonBigLonger {
    width: 400px;
    height: 60px;
    font-size: 18px;
    background: linear-gradient(135deg, #1F3A5F 0%, #2a5090 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    cursor: pointer;
}
.clsButtonBig {
    width: 200px;
    height: 60px;
    font-size: 18px;
    background: linear-gradient(135deg, #1F3A5F 0%, #2a5090 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    cursor: pointer;
}
.clsButtonBigSave {
    width: 200px;
    height: 60px;
    font-size: 18px;
    background: linear-gradient(135deg, #5a9e2f 0%, #7BC043 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    cursor: pointer;
}
.clsButtonBigClear {
    width: 200px;
    height: 60px;
    font-size: 18px;
    background: linear-gradient(135deg, #c0392b 0%, #e74c3c 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    cursor: pointer;
}
.clsButtonVeryBig {
    width: 400px;
    height: 50px;
    font-size: 18px;
    background: linear-gradient(135deg, #1F3A5F 0%, #2a5090 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    cursor: pointer;
}
.clsButtonMedium {
    width: 210px;
    height: 40px;
    font-size: 16px;
    background: linear-gradient(135deg, #1F3A5F 0%, #2a5090 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    cursor: pointer;
}

/* ═══════════════════════════════════════════
   MESSAGES & STATUS
═══════════════════════════════════════════ */
.clsGridMainMessages {
    width: 1100px;
    background: #ffffff;
    padding: 6px 16px;
    border-top: 1px solid #f0f2f5;
}
.clsActionMessage {
    color: #28a745;
    font-weight: 600;
    font-size: 13px;
}
.clsSuccessStatus { color: #28a745; font-weight: 600; }
.clsFailStatus    { color: #dc3545; font-weight: 600; }

/* ═══════════════════════════════════════════
   SEARCH PANEL
═══════════════════════════════════════════ */
.clsGridMainSearch {
    width: 1100px;
    background: #f8f9fa;
    border-top: 1px solid #dde3ed;
    padding: 10px 16px;
}

/* ═══════════════════════════════════════════
   INPUT FIELDS & SELECTS
═══════════════════════════════════════════ */
.clsInput {
    border: 1.5px solid #ccd3de !important;
    border-radius: 6px !important;
    padding: 5px 10px !important;
    font-size: 13px !important;
    height: 34px !important;
    color: #1F3A5F !important;
    background: #fff !important;
}
.clsInput:focus {
    border-color: #1F3A5F !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(31,58,95,0.10) !important;
}
.clsMenu {
    border: 1.5px solid #ccd3de !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    color: #1F3A5F !important;
    background: #fff !important;
    height: 34px !important;
}

/* ═══════════════════════════════════════════
   STANDARD DATA TABLES (h:dataTable)
═══════════════════════════════════════════ */
.cls-table {
    border-collapse: collapse;
    margin: 0 0 10px 5px;
    width: 100%;
}
.cls-table-header {
    text-align: left;
    background: #1F3A5F !important;
    border: none;
    color: #ffffff !important;
    font-weight: 700;
    padding: 10px 12px;
    font-size: 11px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}
.cls-table-odd-row {
    text-align: left;
    background: #ffffff;
    border-bottom: 1px solid #f0f2f5;
    padding-right: 5px;
}
.cls-table-odd-row:hover {
    background: #eef3fb !important;
}
.cls-table-even-row {
    text-align: left;
    background: #f8f9fa;
    border-bottom: 1px solid #f0f2f5;
    padding-right: 5px;
}
.cls-table-even-row:hover {
    background: #eef3fb !important;
}
/* Column cells */
.cls-table-col1,.cls-table-col2,.cls-table-col3,.cls-table-col4,
.cls-table-col5,.cls-table-col6,.cls-table-col7,.cls-table-col8,
.cls-table-col9,.cls-table-col10 {
    border-bottom: 1px solid #f0f2f5;
    border-left: none;
    border-right: none;
    border-top: none;
    padding: 8px 10px;
    font-size: 13px;
    color: #374151;
}

/* ═══════════════════════════════════════════
   REPORT FILTER PANELS
═══════════════════════════════════════════ */
.clsPanelReportFilterTitle {
    width: 100%;
    background: linear-gradient(135deg, #1F3A5F 0%, #2a5090 100%);
    padding: 10px 16px;
}
.clsPanelReportFilter {
    width: 100%;
    background: #ffffff;
    padding: 12px 16px;
    border-bottom: 1px solid #dde3ed;
}
.clsPanelSummary {
    width: 100%;
    background: linear-gradient(135deg, #1F3A5F 0%, #2a5090 100%);
    padding: 8px 16px;
}
.clsLabelReportFilterTitle {
    color: #ffffff;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}
.clsLabelReportFilter {
    font-size: 12px;
    font-weight: 600;
    color: #4a5568;
    white-space: nowrap;
}
.clsInputReportFilter {
    border: 1.5px solid #ccd3de !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    color: #1F3A5F !important;
    height: 32px !important;
    padding: 4px 8px !important;
    background: #fff !important;
}
.clsButtonReportFilter {
    text-align: center;
}

/* ═══════════════════════════════════════════
   PRIMEFACES DATATABLE — GLOBAL OVERRIDES
═══════════════════════════════════════════ */
.ui-datatable thead th {
    background: #1F3A5F !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 10px 12px !important;
    border: none !important;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}
.ui-datatable thead th .ui-column-title {
    color: #ffffff !important;
}
.ui-datatable tbody td {
    font-size: 13px !important;
    padding: 8px 12px !important;
    border-bottom: 1px solid #f0f2f5 !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    vertical-align: middle !important;
    color: #374151;
}
.ui-datatable tbody tr:nth-child(even) td {
    background: #f8f9fa;
}
.ui-datatable tbody tr:hover td {
    background: #eef3fb !important;
}
.ui-datatable-header {
    background: #f8f9fa !important;
    border: none !important;
    border-bottom: 1px solid #dde3ed !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #1F3A5F !important;
}
.ui-paginator {
    background: #f8f9fa !important;
    border-top: 1px solid #dde3ed !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    padding: 6px 10px !important;
}
.ui-paginator .ui-paginator-page,
.ui-paginator .ui-paginator-first,
.ui-paginator .ui-paginator-prev,
.ui-paginator .ui-paginator-next,
.ui-paginator .ui-paginator-last {
    border-radius: 5px !important;
    color: #1F3A5F !important;
    font-weight: 600 !important;
}
.ui-paginator .ui-state-active {
    background: #1F3A5F !important;
    color: #ffffff !important;
    border-color: #1F3A5F !important;
}
.ui-datatable .ui-datatable-summaryrow td {
    background: #fffde7 !important;
    font-weight: 700 !important;
}
.ui-column-filter {
    border: 1.5px solid #ccd3de !important;
    border-radius: 5px !important;
    font-size: 12px !important;
    padding: 3px 6px !important;
}

/* ═══════════════════════════════════════════
   PRIMEFACES INPUT & SELECT OVERRIDES
═══════════════════════════════════════════ */
.ui-inputtext {
    border: 1.5px solid #ccd3de !important;
    border-radius: 6px !important;
    padding: 5px 10px !important;
    font-size: 13px !important;
    color: #1F3A5F !important;
    background: #ffffff !important;
}
.ui-inputtext:focus,
.ui-inputtext.ui-state-focus {
    border-color: #1F3A5F !important;
    box-shadow: 0 0 0 2px rgba(31,58,95,0.10) !important;
    outline: none !important;
}
.ui-selectonemenu {
    border: 1.5px solid #ccd3de !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    color: #1F3A5F !important;
    background: #ffffff !important;
}
.ui-selectonemenu .ui-selectonemenu-trigger {
    border: none !important;
    background: transparent !important;
    color: #1F3A5F !important;
}
.ui-selectonemenu-panel .ui-selectonemenu-item {
    font-size: 13px !important;
    color: #1F3A5F !important;
    padding: 6px 10px !important;
}
.ui-selectonemenu-panel .ui-selectonemenu-item:hover,
.ui-selectonemenu-panel .ui-state-highlight {
    background: #eef3fb !important;
    color: #1F3A5F !important;
}
.ui-calendar .ui-inputtext {
    border: 1.5px solid #ccd3de !important;
    border-radius: 6px !important;
}
.ui-datepicker {
    border: 1px solid #dde3ed !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 20px rgba(31,58,95,0.12) !important;
}
.ui-datepicker .ui-datepicker-header {
    background: linear-gradient(135deg, #1F3A5F 0%, #2a5090 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 10px 10px 0 0 !important;
}
.ui-datepicker td span.ui-state-active,
.ui-datepicker td a.ui-state-active {
    background: #1F3A5F !important;
    color: #fff !important;
    border-radius: 4px !important;
}

/* ═══════════════════════════════════════════
   PRIMEFACES BUTTON OVERRIDES
═══════════════════════════════════════════ */
.ui-button,
.ui-button.ui-state-default {
    background: linear-gradient(135deg, #1F3A5F 0%, #2a5090 100%) !important;
    border: none !important;
    border-radius: 6px !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    box-shadow: none !important;
    transition: background 0.15s;
}
.ui-button:hover,
.ui-button.ui-state-hover {
    background: linear-gradient(135deg, #162c4a 0%, #1F3A5F 100%) !important;
}
.ui-button.ui-state-focus {
    box-shadow: 0 0 0 2px rgba(31,58,95,0.18) !important;
    outline: none !important;
}
/* Keep delete/danger buttons red */
.ui-button.ui-button-danger {
    background: linear-gradient(135deg, #c0392b 0%, #e74c3c 100%) !important;
}

/* ═══════════════════════════════════════════
   PRIMEFACES PANEL
═══════════════════════════════════════════ */
.ui-panel .ui-panel-titlebar {
    background: linear-gradient(135deg, #1F3A5F 0%, #2a5090 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 10px 10px 0 0 !important;
    font-weight: 700 !important;
    font-size: 13px !important;
}
.ui-panel .ui-panel-content {
    background: #ffffff !important;
    border: 1px solid #dde3ed !important;
    border-top: none !important;
    border-radius: 0 0 10px 10px !important;
}

/* ═══════════════════════════════════════════
   PRIMEFACES DIALOG
═══════════════════════════════════════════ */
.ui-dialog .ui-dialog-titlebar {
    background: linear-gradient(135deg, #1F3A5F 0%, #2a5090 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 10px 10px 0 0 !important;
    font-weight: 700 !important;
}
.ui-dialog .ui-dialog-titlebar-icon span,
.ui-dialog .ui-dialog-titlebar-close span {
    color: #ffffff !important;
}
.ui-dialog .ui-dialog-content {
    background: #ffffff !important;
    border: 1px solid #dde3ed !important;
    border-top: none !important;
}
.ui-dialog .ui-dialog-footer {
    background: #f8f9fa !important;
    border: 1px solid #dde3ed !important;
    border-top: 1px solid #dde3ed !important;
    border-radius: 0 0 10px 10px !important;
}

/* ═══════════════════════════════════════════
   PRIMEFACES TAB VIEW
═══════════════════════════════════════════ */
.ui-tabview .ui-tabview-nav li.ui-state-active a,
.ui-tabview .ui-tabview-nav li.ui-state-active {
    background: #1F3A5F !important;
    color: #ffffff !important;
    border-color: #1F3A5F !important;
    border-radius: 6px 6px 0 0 !important;
    font-weight: 700 !important;
}
.ui-tabview .ui-tabview-nav li a {
    color: #1F3A5F !important;
    font-weight: 600;
}
.ui-tabview .ui-tabview-panels {
    background: #ffffff !important;
    border: 1px solid #dde3ed !important;
}

/* ═══════════════════════════════════════════
   AUTOCOMPLETE
═══════════════════════════════════════════ */
.ui-autocomplete-panel {
    border: 1px solid #dde3ed !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 16px rgba(31,58,95,0.12) !important;
}
.ui-autocomplete-panel .ui-autocomplete-item {
    font-size: 13px !important;
    padding: 7px 12px !important;
    color: #1F3A5F !important;
}
.ui-autocomplete-panel .ui-state-highlight {
    background: #eef3fb !important;
    color: #1F3A5F !important;
}

/* ═══════════════════════════════════════════
   GROWL / MESSAGES
═══════════════════════════════════════════ */
.ui-growl-item-container {
    border-radius: 8px !important;
    box-shadow: 0 4px 16px rgba(31,58,95,0.16) !important;
}
.ui-growl-item-container.ui-growl-message-info {
    background: #1F3A5F !important;
}
.ui-growl-item-container.ui-growl-message-error {
    background: #c0392b !important;
}
.ui-growl-item-container.ui-growl-message-warn {
    background: #f59e0b !important;
}
.ui-growl-item-container.ui-growl-message-success {
    background: #28a745 !important;
}

/* ═══════════════════════════════════════════
   PRINT / SALES INVOICE TABLES (unchanged)
   These are used for printed receipts — keep as-is
═══════════════════════════════════════════ */
.cls-table-SalesInvoice {
    border-collapse: collapse;
    border-style: solid;
    border-width: 1px;
    width: 350px;
}
.cls-table-SalesInvoice-very-small {
    border-collapse: collapse;
    border-style: solid;
    border-width: 1px;
    width: 290px;
}
.cls-table-header-SalesInvoice {
    text-align: left;
    border: 1px dotted black;
    color: black;
    font-weight: bold;
}
.cls-table-odd-row-SalesInvoice {
    text-align: left;
    border: 1px dotted #BBBBBB;
}
.cls-table-even-row-SalesInvoice {
    text-align: left;
    border: 1px dotted #BBBBBB;
}
.cls-table-col1-SalesInvoice,
.cls-table-col2-SalesInvoice,
.cls-table-col3-SalesInvoice,
.cls-table-col4-SalesInvoice,
.cls-table-col5-SalesInvoice {
    border: 1px dotted;
    font-size: 12px;
}

/* ═══════════════════════════════════════════
   TRANSACTION FORM SPECIFICS
═══════════════════════════════════════════ */
#dtblTransactorA {
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: -100;
}

/* ═══════════════════════════════════════════
   FIGURE (unchanged)
═══════════════════════════════════════════ */
figure {
    width: 150px;
    text-align: center;
    font-style: italic;
    font-size: smaller;
    text-indent: 0;
    border: thin silver solid;
    margin: 0.5em;
    padding: 0.5em;
}

/* ═══════════════════════════════════════════
   ROW STATUS COLORS (aging reports etc.)
   Must come AFTER datatable overrides so they
   win over the nth-child even-row rule.
═══════════════════════════════════════════ */
.green td,
tr.green td {
    background-color: #238823 !important;
    background-image: none !important;
    color: #000000 !important;
}
.blue td,
tr.blue td {
    background-color: #007fff !important;
    background-image: none !important;
    color: #000000 !important;
}
.amber td,
tr.amber td {
    background-color: #ffbf00 !important;
    background-image: none !important;
    color: #000000 !important;
}
.red td,
tr.red td {
    background-color: #ee4035 !important;
    background-image: none !important;
    color: #000000 !important;
}
.white td,
tr.white td {
    background-color: #ffffff !important;
    background-image: none !important;
    color: #000000 !important;
}
.lightgreenrow td,
tr.lightgreenrow td {
    background-color: #b6fcb6 !important;
    color: #222 !important;
}
/* Keep old bare class selectors for backward compat */
.green  { background-color: #238823 !important; background-image: none !important; color: #000000 !important; }
.blue   { background-color: #007fff !important; background-image: none !important; color: #000000 !important; }
.amber  { background-color: #ffbf00 !important; background-image: none !important; color: #000000 !important; }
.red    { background-color: #ee4035 !important; background-image: none !important; color: #000000 !important; }
.white  { background-color: #ffffff !important; background-image: none !important; color: #000000 !important; }