/* ================================
   Custom Saga Theme Overrides
================================ */

/* Override PrimeFaces Theme Variables */
:root {
    --base-font-size: 1.0625rem; /* Global Font Size. 17px ÷ 16px = 1.0625rem */
    --primary-color: #034B96 !important; /* Updated Primary Color */
    --primary-color-text: #ffffff !important;
    --primary-color-hover: #0460C9 !important; /* Slightly brighter blue for hover */
    --border-radius: 8px !important;

    --secondary-color: #6c757d;
    --accent-color: #00bcd4;

    --background-color: #f8f9fa;
    --surface-color: #ffffff;
    --header-color: #034B96;
    --header-text-color: #ffffff;

    --box-shadow-light: 0 1px 3px rgba(0, 0, 0, 0.1);

    --link-color-text-soft: #66B3FF !important;/* Soft blue, great contrast */
    --link-color-text-soft-hover:#3399FF !important;  /* Slightly deeper on hover */

    --red-text-color: #c62828;     /* Deep crimson red for alerts */
    --green-text-color: #2e7d32;   /* Rich green, visible and professional */
    --amber-text-color: #ef6c00;   /* Deep amber/orange, not too bright */
    --black-text-color: #212121;   /* soft black color */
    --green-light-bright: #A8FF60;   /* Lime Green — vibrant and accessible */

    --summary-header-color: #6c757d;      /* Neutral gray for summary table headers */
    --summary-header-text-color: #ffffff; /* White text for summary table headers */
    --summary-row-color: #f1f1f1;         /* Light gray for summary table rows */
}

/* =============================
   Global Font Setting
============================= */
body, .ui-widget {
    font-family: Arial, 'Trebuchet MS', sans-serif !important;
    font-size: var(--base-font-size) !important;
}

/* ================================
   Global Font Size Adjustments
   ================================ */
/* Apply consistent font size to key UI components */
label,
.ui-outputlabel,
.ui-inputfield,
.ui-selectonemenu,
.ui-calendar,
.ui-autocomplete,
.ui-dropdown,
.ui-button,
input[type="text"],
select,
textarea {
    font-size: var(--base-font-size) !important;
}

/* =============================
   Button Styling
============================= */
.ui-button, .ui-button.ui-state-default {
    background-color: var(--primary-color) !important;
    color: var(--primary-color-text) !important;
    font-weight: bold !important;
    border-radius: var(--border-radius) !important;
    padding: 8px 16px !important;
    border: none !important;
}

/* Hover & Active States */
.ui-button:hover,
.ui-button.ui-state-hover {
    background-color: var(--primary-color-hover) !important;
}

/* Disabled Button */
.ui-button.ui-state-disabled {
    background-color: #cccccc !important;
    color: #666666 !important;
}

.button-icon-within-table{
    width: 30px !important;
    height: 25px !important;
}

/* =============================
   Input Fields
============================= */
.ui-inputfield {
    border: 1px solid var(--primary-color) !important;
    border-radius: var(--border-radius) !important;
    padding: 8px !important;
    background: #ffffff !important;
    color: #222222 !important;
}

.ui-inputfield:focus {
    border-color: var(--primary-color-hover) !important;
    box-shadow: 0 0 5px var(--primary-color-hover) !important;
}

/* Disabled Input Fields */
.ui-inputfield.ui-state-disabled {
    background: #eeeeee !important;
    color: #888888 !important;
    border-color: #cccccc !important;
}

/* =============================
   Dialog & Panel Styling
============================= */
.ui-dialog, .ui-panel {
    border-radius: var(--border-radius) !important;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2) !important;
}

.ui-dialog-titlebar {
    background: var(--primary-color) !important;
    color: var(--primary-color-text) !important;
    font-weight: bold !important;
    padding: 10px !important;
}

/* =============================
   DataTable Styling
============================= */
/* DataTable Header */
.ui-datatable .ui-datatable-header,
.ui-datatable thead th {
    background: var(--primary-color) !important;
    font-size: var(--base-font-size) !important;
    font-weight: bold !important;
    padding: 12px !important;
    color: var(--primary-color-text) !important;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1) !important;
    text-align: left !important;
}
/* DataTable Row Styling */
.ui-datatable .ui-datatable-data tr,
.ui-datatable tbody tr {
    background: #f5f5f5 !important;
    color: #222222 !important;
}
/* Alternating row colors */
.ui-datatable .ui-datatable-data tr:nth-child(even),
.ui-datatable tbody tr:nth-child(even) {
    background: #ebebeb !important;
}
/* Row Hover Effect */
.ui-datatable .ui-datatable-data tr:hover,
.ui-datatable tbody tr:hover {
    background: #e3e3e3 !important;
    cursor: pointer !important;
}
/* Cell Padding */
.ui-datatable td, .ui-datatable th {
    padding: 10px !important;
    border: 1px solid #dddddd !important;
}
/* Selected Row */
.ui-datatable .ui-datatable-data tr.ui-state-highlight {
    background: var(--primary-color-hover) !important;
    color: var(--primary-color-text) !important;
}
/* Pagination Styling */
.ui-paginator {
    background: #f5f5f5 !important;
    border: 1px solid #ddd !important;
    padding: 8px !important;
    border-radius: var(--border-radius) !important;
    /* Align PrimeFaces DataTable Paginator to the Left */
    /* Aligns content to the left */
    justify-content: flex-start !important;
    text-align: left !important;
}
.ui-paginator .ui-paginator-pages .ui-state-active {
    background: var(--primary-color) !important;
    color: var(--primary-color-text) !important;
    font-weight: bold !important;
    border-radius: 4px !important;
}
/* Text color only, no background, high specificity with !important */
.ui-datatable .red td,
.ui-datatable .red span,
.ui-datatable .red {
    color: var(--red-text-color) !important;
}
.ui-datatable .green td,
.ui-datatable .green span,
.ui-datatable .green {
    color: var(--green-text-color) !important;
}
.ui-datatable .amber td,
.ui-datatable .amber span,
.ui-datatable .amber {
    color: var(--amber-text-color) !important;
}
.ui-datatable .white td,
.ui-datatable .white span,
.ui-datatable .white {
    color: var(--black-text-color) !important;
}
.ui-datatable .black td,
.ui-datatable .black span,
.ui-datatable .black {
    color: var(--black-text-color) !important;
}
/* Optional: preserve text color on hover */
.ui-datatable .red:hover td,
.ui-datatable .green:hover td,
.ui-datatable .amber:hover td,
.ui-datatable .black:hover td,
.ui-datatable .white:hover td {
    color: inherit !important;
}
/* Optional: preserve text color on selected row (highlighted) */
.ui-datatable .ui-state-highlight.red td,
.ui-datatable .ui-state-highlight.green td,
.ui-datatable .ui-state-highlight.amber td,
.ui-datatable .ui-state-highlight.black td,
.ui-datatable .ui-state-highlight.white td {
    color: inherit !important;
}

/* =============================
   Input Fields - Fix for Rounded Edges
============================= */
.ui-inputfield {
    border: 1px solid var(--primary-color) !important;
    border-radius: var(--border-radius) !important;
    padding: 8px !important;
    background: #ffffff !important;
    color: #222222 !important;
    outline: none !important; /* Removes default focus border */
    box-shadow: none !important; /* Removes any default inner shadows */
    appearance: none !important; /* Ensures uniform look across browsers */
}

/* Ensuring focus state does not reintroduce the issue */
.ui-inputfield:focus {
    border-color: var(--primary-color-hover) !important;
    box-shadow: 0 0 5px var(--primary-color-hover) !important;
    outline: none !important;
}

/* Fixing the edge issue specifically for WebKit-based browsers (Chrome, Safari) */
.ui-inputfield::-webkit-inner-spin-button,
.ui-inputfield::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

/* Ensures no unwanted background in Firefox */
.ui-inputfield:-moz-ui-invalid {
    box-shadow: none !important;
}

/* For better consistency across browsers */
.ui-inputfield::-ms-clear {
    display: none !important;
}

/* =============================
   Fix for Rounded SelectOneMenu (PrimeFaces)
============================= */

/* Main Dropdown Styling */
.ui-selectonemenu {
    border: 1px solid var(--primary-color) !important;
    border-radius: var(--border-radius) !important;
    background: #ffffff !important;
    color: #222222 !important;
    overflow: hidden !important; /* Prevents sharp edges */
}

/* Ensuring the internal structure is also rounded */
.ui-selectonemenu .ui-selectonemenu-label {
    border-radius: var(--border-radius) !important;
    padding: 8px 40px 8px 8px !important; /* add right padding */
    background: transparent !important;
    color: inherit !important;
}

/* Fix the dropdown button (trigger) */
.ui-selectonemenu .ui-selectonemenu-trigger {
    border-radius: 0 var(--border-radius) var(--border-radius) 0 !important;
    background: var(--primary-color) !important;
    color: var(--primary-color-text) !important;
    width: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Panel (Dropdown List) */
.ui-selectonemenu-panel {
    border-radius: var(--border-radius) !important;
    border: 1px solid var(--primary-color) !important;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15) !important;
}

/* Dropdown Items */
.ui-selectonemenu-item {
    padding: 10px !important;
    background: #ffffff !important;
    color: #222222 !important;
}

/* Highlight Hover Effect */
.ui-selectonemenu-item:hover {
    background: var(--primary-color-hover) !important;
    color: var(--primary-color-text) !important;
}

/* Selected Item */
.ui-selectonemenu-item.ui-state-highlight {
    background: var(--primary-color) !important;
    color: var(--primary-color-text) !important;
}

/* Removes the default browser dropdown styling */
.ui-selectonemenu select {
    appearance: none !important;
    border: none !important;
    background: transparent !important;
}

/* =============================
   Mainly from Login Change but applies to other pges
============================= */
.login-form .ui-panel {
    border-radius: 12px;
    background: #fff;
}

.text-center {
    text-align: center;
}

.mt-2 {
    margin-top: 1rem;
}
.mt-3 {
    margin-top: 1.5rem;
}
.mb-3 {
    margin-bottom: 1.5rem;
}
.mb-2 {
    margin-bottom: 1rem;
}
.mb-1 {
    margin-bottom: 0.5rem;
}
.font-bold {
    font-weight: bold;
}
.text-danger {
    color: #d9534f;
}
.text-warning {
    color: #f0ad4e;
}
.text-success {
    color: #5cb85c;
}
.text-info {
    color: #0275d8;
}

/* ================================
   Header and Branding Styling
================================ */
.app-header {
    background-color: var(--header-color);
    color: var(--header-text-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: var(--border-radius);
}

.app-title {
    font-size: 1.4rem;
    font-weight: bold;
    color: var(--header-text-color);
}

.app-client {
    font-size: 1rem;
    color: var(--header-text-color);
    text-align: right;
}

/* ================================
   Menubar Styling Enhancements
================================ */
body .ui-menubar {
    background-color: var(--surface-color) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    border-radius: var(--border-radius) !important;
    padding: 0.5rem 1rem !important;
}

body .ui-menubar .ui-menuitem-link {
    padding: 0.6rem 1rem !important;
    color: #495057 !important;
    border-radius: var(--border-radius) !important;
    transition: background-color 0.2s ease !important;
}

body .ui-menubar .ui-menuitem-link:hover {
    background-color: var(--primary-color-hover) !important;
    color: var(--primary-color-text) !important;
}

body .ui-menubar .ui-menuitem-link:hover .ui-menuitem-text {
    color: var(--primary-color-text) !important;
}

body .ui-menubar .ui-menuitem-link:hover .ui-menuitem-icon {
    color: var(--primary-color-text) !important;
}

/* ================================
   User Menu Styling
================================ */
.user-menu > .ui-menuitem-link {
    font-weight: 500;
    color: var(--primary-color);
}

/* ================================
   Alert Badge Styling
================================ */
.p-overlay-badge {
    position: relative;
}

.p-overlay-badge .p-badge {
    position: absolute;
    top: -0.5rem;
    right: -0.5rem;
    background-color: #dc3545;
    color: #fff;
    font-size: 0.75rem;
    padding: 0.2rem 0.4rem;
    border-radius: 50%;
}

/* ================================
   Red Icon and Text for Stock Alert Menu Item
================================ */
.ui-menubar .stock-alert-icon .ui-menuitem-icon,
.ui-menubar .stock-alert-icon .ui-menuitem-text {
    color: #dc3545 !important;  /* Bootstrap red */
    font-weight: bold !important;
}

/* ================================
   Utility Classes
================================ */
.bg-primary {
    background-color: var(--primary-color) !important;
    color: var(--primary-color-text) !important;
}

.text-primary {
    color: var(--primary-color) !important;
}

.rounded {
    border-radius: var(--border-radius) !important;
}

/* Two-column layout for login field */
.two-column {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.column-label {
    flex: 0 0 150px; /* Fixed width for label column */
    font-weight: bold;
}

.column-input {
    flex: 1;
}

/* =============================
   clsGridMainHeader Styling
============================= */
.clsGridMainHeader {
    background-color: var(--secondary-color);
    color: #ffffff;
    padding: 0.5rem 1rem;
    margin: 0;
    border-left: 0;
    border-radius: var(--border-radius);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    width: 100%;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: 0.95rem;
    min-height: 40px;
    border-collapse: separate;      /* Required to allow spacing */
    border-spacing: 0.75rem 0rem;   /* ⬅️ Horizontal spacing only */
}

.clsGridMainHeader .ui-outputlabel {
    background-color: rgba(255, 255, 255, 0.15);
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
    font-weight: 500;
    font-size: 0.85rem;
    color: #ffffff;
}

.clsGridMainHeader .ui-commandlink {
    color: var(--link-color-text-soft) !important;
    font-weight: 500;
    text-decoration: none !important;
    transition: color 0.2s ease-in-out;
}

.clsGridMainHeader .ui-commandlink:hover {
    color: var(--link-color-text-soft-hover) !important;  /* Slightly deeper on hover */
    text-decoration: none !important;
}

.clsGridMainHeader .ui-selectonemenu {
    background-color: #ffffff !important;
    color: #222222 !important;
    font-size: 0.9rem;
}

/* =============================
   Migrated as if from old Styling
============================= */
.clsGridMainHeaderChild{
    width: 1060px;
    background-color: black;
}
.clsFailStatus{
    color: var(--red-text-color) !important;
}
.clsSuccessStatus{
    color: var(--green-text-color) !important;
}

/* =============================
   clsPanelFilter Styling
============================= */
/* === PanelGrid Container Style === */
.clsPanelFilter {
    background-color: var(--surface-color);
    padding: 0.5rem 1rem;
    margin: 0;
    border-left: 2px solid var(--primary-color);
    border-right: 2px solid var(--primary-color);
    border-radius: var(--border-radius);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    font-size: 0.95rem;
    width: 100%;
    /* Keep native table layout with spacing */
    table-layout: auto;
    border-collapse: separate;
    border-spacing: 0.75rem 0rem;
}

/* === Force all controls inside each td to fill their td === */
.clsPanelFilter td > * {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

/* === Apply to specific PrimeFaces components (to be sure) === */
.clsPanelFilter .ui-inputfield,
.clsPanelFilter .ui-selectonemenu,
.clsPanelFilter .ui-calendar,
.clsPanelFilter .ui-autocomplete,
.clsPanelFilter .ui-commandbutton,
.clsPanelFilter .ui-button,
.clsPanelFilter .ui-dropdown,
.clsPanelFilter .ui-autocomplete-panel {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

/* Normalize ONLY h:inputText and h:selectOneMenu inside clsPanelFilter */
.clsPanelFilter input[type="text"]:not(.ui-inputfield),
.clsPanelFilter select:not(.ui-selectonemenu) {
    height: 38px !important;
    padding: 6px 10px;
    font-size: 0.95rem;
    line-height: 1.5;
    box-sizing: border-box;
    border: 1px solid var(--primary-color);
    border-radius: var(--border-radius);
}

/* =============================
   clsGridMainInput Styling
============================= */
/* === PanelGrid Container Style === */
.clsGridMainInput {
    background-color: var(--surface-color);
    padding: 0.5rem 1rem;
    margin: 0;
    border-left: 2px solid var(--primary-color);
    border-right: 2px solid var(--primary-color);
    border-radius: var(--border-radius);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    font-size: 0.95rem;
    width: 100%;
    /* Keep native table layout with spacing */
    table-layout: auto;
    border-collapse: separate;
    border-spacing: 0.75rem 0rem;
}

/* Force all controls inside each td to fill their td === */
.clsGridMainInput td > * {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

/* Apply to specific PrimeFaces components (to be sure) === */
.clsGridMainInput .ui-inputfield,
.clsGridMainInput .ui-selectonemenu,
.clsGridMainInput .ui-calendar,
.clsGridMainInput .ui-autocomplete,
.clsGridMainInput .ui-commandbutton,
.clsGridMainInput .ui-button,
.clsGridMainInput .ui-dropdown,
.clsGridMainInput .ui-autocomplete-panel {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

/* Normalize ONLY h:inputText and h:selectOneMenu inside clsGridMainInput */
.clsGridMainInput input[type="text"]:not(.ui-inputfield),
.clsGridMainInput select:not(.ui-selectonemenu) {
    height: 38px !important;
    padding: 6px 10px;
    font-size: 0.95rem;
    line-height: 1.5;
    box-sizing: border-box;
    border: 1px solid var(--primary-color);
    border-radius: var(--border-radius);
}

/* Separate styling for textarea */
.clsGridMainInput textarea:not(.ui-inputfield) {
    min-height: 38px; /* only minimum height! */
    padding: 6px 10px;
    font-size: 0.95rem;
    line-height: 1.5;
    box-sizing: border-box;
    border: 1px solid var(--primary-color);
    border-radius: var(--border-radius);
    resize: vertical; /* allow vertical resizing only */
}

.clsGridMainInput input[type="submit"],
.clsGridMainInput input[type="button"] {
    background-color: var(--primary-color);
    color: var(--primary-color-text);
    font-weight: bold;
    border-radius: var(--border-radius);
    padding: 8px 16px;
    border: none;
    height: 38px;
    cursor: pointer;
}


/* =============================
   clsGridMainInputStatic Styling
============================= */
/* === PanelGrid Container Style === */
.clsGridMainInputStatic {
    background-color: var(--surface-color);
    padding: 0.5rem 1rem;
    margin: 0;
    /* border-left: 2px solid var(--primary-color); */
    /* border-right: 2px solid var(--primary-color); */
    border-radius: var(--border-radius);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    font-size: 0.95rem;
    width: 100%;
    /* Keep native table layout with spacing */
    table-layout: auto;
    border-collapse: separate;
    border-spacing: 0.75rem 0rem;
}

/* Normalize ONLY h:inputText and h:selectOneMenu inside clsGridMainInputStatic */
.clsGridMainInputStatic input[type="text"]:not(.ui-inputfield),
.clsGridMainInputStatic select:not(.ui-selectonemenu) {
    height: 38px !important;
    padding: 6px 10px;
    font-size: 0.95rem;
    line-height: 1.5;
    box-sizing: border-box;
    border: 1px solid var(--primary-color);
    border-radius: var(--border-radius);
}

/* Separate styling for textarea */
.clsGridMainInputStatic textarea:not(.ui-inputfield) {
    min-height: 38px; /* only minimum height! */
    padding: 6px 10px;
    font-size: 0.95rem;
    line-height: 1.5;
    box-sizing: border-box;
    border: 1px solid var(--primary-color);
    border-radius: var(--border-radius);
    resize: vertical; /* allow vertical resizing only */
}

.clsGridMainInputStatic input[type="submit"],
.clsGridMainInputStatic input[type="button"] {
    background-color: var(--primary-color);
    color: var(--primary-color-text);
    font-weight: bold;
    border-radius: var(--border-radius);
    padding: 8px 16px;
    border: none;
    height: 38px;
    cursor: pointer;
}

/* =============================
   clsGridMainCommands Styling
============================= */
/* === PanelGrid Container Style === */
.clsGridMainCommands {
    background-color: var(--surface-color);
    padding: 0.5rem 1rem;
    margin: 0;
    /* border-left: 2px solid var(--primary-color); */
    /* border-right: 2px solid var(--primary-color); */
    /* border-radius: var(--border-radius); */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    font-size: 0.95rem;
    width: 100%;
    /* Keep native table layout with spacing */
    table-layout: auto;
    border-collapse: separate;
    border-spacing: 0.75rem 0rem;
}

/* === Force all controls inside each td to fill their td === */
.clsGridMainCommands td > * {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

/* === Apply to specific PrimeFaces components (to be sure) === */
.clsGridMainCommands .ui-inputfield,
.clsGridMainCommands .ui-selectonemenu,
.clsGridMainCommands .ui-calendar,
.clsGridMainCommands .ui-autocomplete,
.clsGridMainCommands .ui-commandbutton,
.clsGridMainCommands .ui-button,
.clsGridMainCommands .ui-dropdown,
.clsGridMainCommands .ui-autocomplete-panel {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

/* Normalize ONLY h:inputText and h:selectOneMenu inside clsGridMainCommands */
.clsGridMainCommands input[type="text"]:not(.ui-inputfield),
.clsGridMainCommands select:not(.ui-selectonemenu) {
    height: 38px !important;
    padding: 6px 10px;
    font-size: 0.95rem;
    line-height: 1.5;
    box-sizing: border-box;
    border: 1px solid var(--primary-color);
    border-radius: var(--border-radius);
}

.clsGridMainCommands input[type="submit"],
.clsGridMainCommands input[type="button"] {
    background-color: var(--primary-color);
    color: var(--primary-color-text);
    font-weight: bold;
    border-radius: var(--border-radius);
    padding: 8px 16px;
    border: none;
    height: 38px;
    cursor: pointer;
}

/* =============================
    Styling for process dialogs 
============================= */
/* =============================
    Styling for process dialogs 
============================= */
.ui-dialog.progress-dialog {
    width: auto !important;
    height: auto !important;
    max-width: 200px !important;
    max-height: 200px !important;
    text-align: center !important;
    padding: 1rem !important;
}

.ui-dialog.progress-dialog .ui-dialog-content {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    padding: 0 !important;
}

/* =============================
   Statement Detail Panel Grid Styling
   Applies to any panelGrid with styleClass="clsStatementDetail"
============================= */
.clsStatementDetail {
    width: 100% !important;
    border-collapse: collapse;
    margin: 1rem 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border-radius: var(--border-radius);
    overflow: hidden;
}

.clsStatementDetail table {
    width: 100% !important;
    border-collapse: collapse;
}

.clsStatementDetail .ui-panelgrid-cell {
    padding: 8px 12px !important;
    border: 1px solid #dddddd !important;
    vertical-align: top;
}

/* Header row styling */
.clsStatementDetail .ui-panelgrid-header .ui-panelgrid-cell {
    background-color: var(--primary-color) !important;
    color: var(--primary-color-text) !important;
    font-weight: bold;
    text-align: center;
    padding: 12px !important;
}

/* Section header styling */
.clsStatementDetail tr:nth-child(3) .ui-panelgrid-cell,
.clsStatementDetail tr:nth-child(6) .ui-panelgrid-cell,
.clsStatementDetail tr:nth-child(9) .ui-panelgrid-cell {
    background-color: #f5f5f5 !important;
    font-weight: bold;
    border-top: 2px solid var(--primary-color) !important;
    border-bottom: 2px solid var(--primary-color) !important;
}

/* Sub-section styling */
.clsStatementDetail tr:nth-child(4) .ui-panelgrid-cell,
.clsStatementDetail tr:nth-child(7) .ui-panelgrid-cell,
.clsStatementDetail tr:nth-child(10) .ui-panelgrid-cell {
    background-color: #f9f9f9 !important;
    font-weight: 500;
}

/* Alternating row colors */
.clsStatementDetail tr:nth-child(even):not(:first-child):not(:nth-child(3)) .ui-panelgrid-cell {
    background-color: #f8f8f8 !important;
}

/* Right-align amounts column */
.clsStatementDetail .ui-panelgrid-cell:last-child {
    text-align: right !important;
    font-family: monospace !important;
    white-space: nowrap;
}

/* Command link styling */
.clsStatementDetail .ui-commandlink {
    color: var(--primary-color) !important;
    text-decoration: none !important;
    display: block;
    padding: 2px 0;
}

.clsStatementDetail .ui-commandlink:hover {
    color: var(--primary-color-hover) !important;
    text-decoration: underline !important;
}

/* Highlight important totals */
.clsStatementDetail .ui-outputlabel[style*='color: blue;'],
.clsStatementDetail .ui-outputlabel[style*='background-color: yellow;'] {
    font-weight: bold !important;
    padding: 6px 10px !important;
    border-radius: 4px;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .clsStatementDetail .ui-panelgrid-cell {
        padding: 6px 8px !important;
        font-size: 0.9rem;
    }
}

/* Print styling */
@media print {
    .clsStatementDetail {
        border: 1px solid #000 !important;
        page-break-inside: avoid;
    }

    .clsStatementDetail .ui-panelgrid-cell {
        border: 1px solid #000 !important;
    }

    .clsStatementDetail .ui-commandlink {
        color: #000 !important;
        text-decoration: none !important;
    }
}
.clsTopLeftAlign td {
    vertical-align: top;
    text-align: left;
}
/* For h:outputLabel rendered as h:outputLabel tag */
.clsRightAlignLabelText h\:outputLabel {
    text-align: right;
    display: block;
}
/* For h:outputLabel rendered as normal <label> */
.clsRightAlignLabelText label {
    text-align: right;
    display: block;
}

/* For PrimeFaces p:commandLink rendered as <a> */
.clsRightAlignLabelText a {
    text-align: right;
    display: block;
}

/* =============================
   Remove spacing of components from panelgrids and nested/inner panel grids
============================= */
.clsNoBorderSpacing{
    border-spacing: 0 !important;
}

.clsGridMainInput table,
.clsGridMainInput table table {
    border-spacing: 0 !important;
    border-collapse: separate !important;
    ;
}

/* =============================
   Stylign for uniform link or image
============================= */
.tile-text-container {
    display: block;
    width: 120px;
    height: 120px;
    background-color: var(--surface-color);
    color: var(--black-text-color);
    border: 1px solid var(--primary-color);
    border-radius: var(--border-radius);
    margin-bottom: 20px;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.5rem;
    box-sizing: border-box;
    word-break: break-word;
    white-space: normal;
    overflow: hidden;
}
/* =============================
   Ensure p:selectOneMenu has consistent height and alignment across the board whether empty or filled 
============================= */
.ui-selectonemenu .ui-selectonemenu-label {
    min-height: 38px !important; /* Match other inputs */
    padding: 8px 40px 8px 8px !important;
    display: flex !important;
    align-items: center !important; /* vertically center the text */
}
/* =============================
   Making side bar have a scroll bar should text overflow 
============================= */
.clsMySidebar {
    overflow-y: auto !important;
    max-height: 90vh;
}

/* 
===============================================
  clsCenterAlignAll CSS Class
  --------------------------------------------
  Use this class on <h:panelGrid> components 
  to center-align all PrimeFaces (p:) and 
  standard JSF (h:) child components both 
  horizontally and vertically.

  Applies text, input, button, label, 
  and grid cell alignment.
===============================================
*/

.clsCenterAlignAll {
    text-align: center !important;
    justify-content: center !important;
    align-items: center !important;
}

/* Center-align all input components */
.clsCenterAlignAll input,
.clsCenterAlignAll textarea,
.clsCenterAlignAll select {
    text-align: center !important;
    display: block !important;
    margin: 0 auto !important;
}

/* Center-align PrimeFaces buttons and links */
.clsCenterAlignAll .ui-button,
.clsCenterAlignAll .ui-commandlink,
.clsCenterAlignAll .ui-link {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 auto !important;
}

/* Center-align panelGrid cells (PrimeFaces) */
.clsCenterAlignAll .ui-panelgrid-cell {
    text-align: center !important;
    vertical-align: middle !important;
}

/* Center-align labels and output text */
.clsCenterAlignAll label,
.clsCenterAlignAll .ui-outputlabel,
.clsCenterAlignAll .ui-outputtext {
    text-align: center !important;
    display: block !important;
    margin: 0 auto !important;
}

/* 
===============================================================================
  clsLeftAlignAll CSS Class
  ---------------------------------------------------------------------------
  Use this class on <h:panelGrid> components to enforce left alignment of all 
  child elements including input fields, buttons, labels, links, and output 
  text for both PrimeFaces (p:) and standard JSF (h:) components.
===============================================================================
*/

.clsLeftAlignAll {
    text-align: left !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
}

/* Left-align input components */
.clsLeftAlignAll input,
.clsLeftAlignAll textarea,
.clsLeftAlignAll select {
    text-align: left !important;
    display: block !important;
    margin-left: 0 !important;
    margin-right: auto !important;
}

/* Left-align PrimeFaces buttons and links */
.clsLeftAlignAll .ui-button,
.clsLeftAlignAll .ui-commandlink,
.clsLeftAlignAll .ui-link {
    display: inline-flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    margin-left: 0 !important;
    margin-right: auto !important;
}

/* Left-align panelGrid cells (PrimeFaces) */
.clsLeftAlignAll .ui-panelgrid-cell {
    text-align: left !important;
    vertical-align: middle !important;
}

/* Left-align labels and output text */
.clsLeftAlignAll label,
.clsLeftAlignAll .ui-outputlabel,
.clsLeftAlignAll .ui-outputtext {
    text-align: left !important;
    display: block !important;
    margin-left: 0 !important;
    margin-right: auto !important;
}

/* ================================================================
   Custom Styling for Summary vs. Detail DataTables
   ---------------------------------------------------------------
   Applies to tables using styleClass="clsTblSummaryCustom" and 
   styleClass="clsTblDetailCustom" to visually distinguish summary
   rows from detail rows.
================================================================ */
/* Summary DataTable */
.clsTblSummaryCustom .ui-datatable-header,
.clsTblSummaryCustom thead th {
    background-color: var(--summary-header-color) !important;
    color: var(--summary-header-text-color) !important;
}
.clsTblSummaryCustom .ui-datatable-data tr {
    background-color: var(--summary-row-color) !important;
}
/* Detail DataTable (inherits base, but you can fine-tune) */
.clsTblDetailCustom .ui-datatable-header,
.clsTblDetailCustom thead th {
    background-color: var(--primary-color) !important;
    color: var(--primary-color-text) !important;
}
.clsTblDetailCustom .ui-datatable-data tr {
    background-color: #ffffff !important;
}

/* Prevent splitButton from breaking lines */
.ui-splitbutton {
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center;
}

/* clsFixedWidth
   Restricts all input components inside this container to a max width of 250px.
   Applies to standard HTML inputs and PrimeFaces components via class selectors.
*/
.clsFixedWidth input[type="text"],
.clsFixedWidth input[type="number"],
.clsFixedWidth input[type="email"],
.clsFixedWidth input[type="password"],
.clsFixedWidth textarea,
.clsFixedWidth select,
.clsFixedWidth .ui-selectonemenu,
.clsFixedWidth .ui-selectcheckboxmenu,
.clsFixedWidth .ui-inputtext,
.clsFixedWidth .ui-inputfield,
.clsFixedWidth .ui-inputnumber,
.clsFixedWidth .ui-calendar,
.clsFixedWidth .ui-selectmanymenu,
.clsFixedWidth .ui-selectoneradio,
.clsFixedWidth .ui-selectbooleancheckbox {
    max-width: 250px !important;
    width: 100% !important;
    box-sizing: border-box;
}
/* General top alignment for all cells */
.receipt-items-table td {
    vertical-align: top !important;
    padding: 2px 2px !important; /* 2px top/bottom, 2px left/right */
    line-height: 1.2 !important;
    border: 1px dashed #000000 !important;
    color: #000000 !important;
    border-left: none !important;
    border-right: none !important;
}
/* Add borders to table and headers */
.receipt-items-table {
    border-collapse: collapse !important;
    width: 100% !important;
    table-layout: auto !important;
    border: 1px dashed #000000 !important;
    border-left: none !important;
    border-right: none !important;
}
.receipt-items-table th {
    border: 1px dashed #000000 !important;
    padding: 2px 2px !important; /* slight side padding */
    text-align: left !important;
    font-weight: bold !important;
    color: #000000 !important;
    border-left: none !important;
    border-right: none !important;
}

@media print {
    .receipt-items-table,
    .receipt-items-table th,
    .receipt-items-table td {
        border: 1px dashed #000000 !important;
        border-collapse: collapse !important;
        color: #000000 !important;
        -webkit-print-color-adjust: exact !important;
    }
    /* Remove vertical borders, keep only horizontals */
    .receipt-items-table th,
    .receipt-items-table td {
        border-left: none !important;
        border-right: none !important;
    }
    .receipt-items-table {
        width: 100% !important;
        table-layout: auto !important;
        border-left: none !important;
        border-right: none !important;
    }
}

/* Header alignment */
.header-left {
    text-align: left !important;
    vertical-align: top !important;
    padding: 0px !important;
    margin: 0px !important;
    line-height: 1 !important;
}
.header-right {
    text-align: right !important;
    vertical-align: top !important;
    padding: 0px !important;
    margin: 0px !important;
    line-height: 1 !important;
}
/* Body cell alignment */
.col-left-top {
    text-align: left !important;
    vertical-align: top !important;
    padding: 0px !important;
    margin: 0px !important;
    line-height: 1 !important;
}
.col-right-top {
    text-align: right !important;
    vertical-align: top !important;
    padding: 0px !important;
    margin: 0px !important;
    line-height: 1 !important;
}
.align-left {
    text-align: left !important;
}
.align-right {
    text-align: right !important;
}

/* ============================================
   DAY CLOSING DASHBOARD LAYOUT - FINAL CLEANED
============================================ */

/* Grid layout for 4 equal-width panels with small gaps */
.day-closing-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem; /* Small gap to separate panels */
    width: 100vw; /* Full viewport width */
    max-width: 100%;
    padding: 0.5rem;
    box-sizing: border-box;
}

/* Panel container uses full width & flex for vertical stacking */
.day-closing-container .ui-panelgrid {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    background: var(--surface-color);
}

/* Tables use available width, no forced fixed column width */
.day-closing-container .ui-panelgrid table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}

/* Table cells: comfortable padding, vertical alignment */
.day-closing-container .ui-panelgrid table tr td {
    padding: 10px 14px;
    word-break: break-word;
    vertical-align: top;
    color: #444; /* Soft dark gray for improved readability */
}

/* Increase horizontal spacing for middle cell */
.day-closing-container .ui-panelgrid table tr td:nth-child(2) {
    padding-left: 1rem;  /* More space on the left */
    padding-right: 1rem; /* More space on the right */
}

/* Slightly adjust padding for outer cells */
.day-closing-container .ui-panelgrid table tr td:nth-child(1),
.day-closing-container .ui-panelgrid table tr td:nth-child(3) {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

/* Column alignments for 3-column rows */
.day-closing-container .ui-panelgrid table tr td:first-child {
    text-align: left;
}
.day-closing-container .ui-panelgrid table tr td:nth-child(2) {
    text-align: center;
}
.day-closing-container .ui-panelgrid table tr td:last-child {
    text-align: right;
}

/* Main header row styling */
.day-closing-container .ui-panelgrid table tr:first-child td {
    background-color: var(--primary-color);
    color: var(--primary-color-text);
    font-size: 1.1rem;
    font-weight: bold;
    text-align: center;
    padding: 12px;
}

/* Total amount row */
.day-closing-container .ui-panelgrid table tr:nth-child(2) td {
    font-size: 1.2rem;
    font-weight: bold;
    text-align: center;
    padding: 8px;
    border-bottom: 1px solid #ddd;
}

/* Currency row */
.day-closing-container .ui-panelgrid table tr:nth-child(3) td {
    font-size: 0.9rem;
    color: #888; /* Muted gray for currency */
    text-align: center;
    padding: 4px;
    border-bottom: 1px solid #ddd;
}

/* Section headers */
.section-header {
    font-weight: 600;
    text-align: center;
    padding: 8px;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

/* Green section header background */
.pnlSales .section-header,
.pnlCashReceipt .section-header {
    background-color: rgba(46, 125, 50, 0.1);
    color: var(--green-text-color);
}

/* Red section header background */
.pnlPurchases .section-header,
.pnlCashPayment .section-header {
    background-color: rgba(198, 40, 40, 0.1);
    color: var(--red-text-color);
}

/* Data rows: subtle bottom border for separation */
.day-closing-container .ui-panelgrid table tr {
    border-bottom: 1px solid #eee;
}

/* Color coding for main panel headers */
.pnlSales table tr:first-child td,
.pnlCashReceipt table tr:first-child td {
    background-color: var(--green-text-color);
    color: white;
}

.pnlPurchases table tr:first-child td,
.pnlCashPayment table tr:first-child td {
    background-color: var(--red-text-color);
    color: white;
}

/* Utility text styles */
.align-left {
    text-align: left !important;
}
.text-center {
    text-align: center !important;
}
.align-right {
    text-align: right !important;
}
.text-muted {
    color: #888 !important;
}
.font-bold {
    font-weight: bold !important;
}

/* Print-friendly tweaks */
@media print {
    .day-closing-container {
        grid-template-columns: repeat(4, 1fr);
        page-break-inside: avoid;
    }

    .day-closing-container .ui-panelgrid {
        border: 1px solid #ddd !important;
    }

    .pnlSales table tr:first-child td,
    .pnlCashReceipt table tr:first-child td {
        -webkit-print-color-adjust: exact;
        /* print-color-adjust: exact; */ /* Commented out: unknown property for some validators */
    }

    .pnlPurchases table tr:first-child td,
    .pnlCashPayment table tr:first-child td {
        -webkit-print-color-adjust: exact;
        /* print-color-adjust: exact; */ /* Commented out for validator compatibility */
    }
}

.cancelled-row {
    text-decoration: line-through !important;
}