@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

/*--------------------------------------------------------------------------------*/
/*  Wayware theme colors                                                          */
/*--------------------------------------------------------------------------------*/
:root {
    --rz-primary-dark: #063e6b;
    --rz-primary-darker: #052e4f;
    --rz-primary: #084D84;
    --rz-primary-light: #1b6ca6;
    --rz-primary-lighter: rgba(27, 108, 166, 0.12);
    --rz-on-primary-lighter: #107db5;
    --rz-grid-header-font-size: 0.8rem;
    --rz-grid-cell-font-size: 0.8rem;
    --rz-input-height: 2rem;
    --rz-input-padding: 2px 7px 2px 7px;
    --rz-dropdown-item-padding: 2px 7px 2px 7px;
    --rz-grid-header-background-color: var(--wayware-grid-header-background-color);
    --rz-grid-frozen-cell-background-color: var(--wayware-grid-header-background-color);
    --rz-grid-header-color: var(--wayware-grid-header-color);
    --wayware-grid-header-background-color: rgb(235, 235, 235);
    --wayware-grid-header-color: rgb(0, 0, 0);
    --wayware-background-color-lighter: rgb(251, 251, 251);
    --wayware-form-label-font-color: #191919;
}


/*--------------------------------------------------------------------------------*/
/*  Dialogue and form background color                                            */
/*--------------------------------------------------------------------------------*/
.rz-dialog,
.rz-dialog-titlebar,
.rz-dialog-content,
.rz-fieldset-content,
.rz-card,
.rz-card.rz-variant-flat,
.rz-card.rz-variant-filled {
    background-color: var(--wayware-background-color-lighter)
}

/*.rz-variant-flat
{
    background-color: yellow
}

.rz-variant-filled {
    background-color: green
}*/


/*--------------------------------------------------------------------------------*/
/*  Padding                                                                       */
/*--------------------------------------------------------------------------------*/
.rz-dialog-content,
.rz-dialog,
.rz-fieldset-content,
.rz-card {
    padding: 12px
}

@media (max-width: 640px) {
    .rz-dialog-content,
    .rz-dialog,
    .rz-fieldset-content,
    .rz-card {
        padding: 5px
    }
}

@media (max-width: 640.98px) {
    .rz-body {
        padding: 10px;
    }
}

@media (min-width: 641px) {
    .rz-body {
        padding: 6px;
    }
}


/*--------------------------------------------------------------------------------*/
/*  Form fields gap and margin                                                    */
/*--------------------------------------------------------------------------------*/
/* WIDE SCREEN LAYOUT -> label is next to input: Use margin at top and bottom */
.ww-form-field-row {
	row-gap: 0px;
    margin-top: 8px;
    margin-bottom: 8px;
}
/* NARROW SCREEN LAYOUT-> label on top of input: Use margin at bottom create a gap from one label\input pair to the next*/
@media (max-width: 1026px) {
    .ww-form-field-row {
        row-gap: 0px;
        margin-top: 0px;
        margin-bottom: 10px;
    }
}



/*--------------------------------------------------------------------------------*/
/*   Grid                                                                         */
/*--------------------------------------------------------------------------------*/
.rz-grid-table-fixed .rz-frozen-cell .rz-cell-data,
.rz-grid-table-fixed .rz-frozen-cell .rz-cell-data,
.rz-grid-table-fixed .rz-frozen-cell-left .rz-cell-data {
    color: var(--wayware-grid-header-color);
    z-index: 1;
}

.rz-paginator { background: var(--wayware-grid-header-background-color); }


.rz-cell-filter {
    background: var(--wayware-grid-header-background-color);
    color: var(--wayware-grid-header-color);
}



/*--------------------------------------------------------------------------------*/
/*  Remove UPPERCASE on buttons                                                   */
/*--------------------------------------------------------------------------------*/
.rz-button-md { text-transform: none; }
.rz-button-lg { text-transform: none; }
.rz-button-sm { text-transform: none; }
.rz-button-xs { text-transform: none; }



/*--------------------------------------------------------------------------------*/
/*  DatePicker popup -> use Wayware blue instead of the theme's pink accent        */
/*--------------------------------------------------------------------------------*/
/* The Radzen Material theme colours the selected day and the OK button with its   */
/* secondary colour (--rz-secondary: pink). The OK button reads var(--rz-secondary) */
/* directly, so remapping it on the popup container recolours the button. The       */
/* selected day, however, reads --rz-datepicker-calendar-selected-background-color, */
/* which the theme already resolved to pink at :root - so that DERIVED variable     */
/* must be overridden directly (remapping --rz-secondary alone does not reach it).  */
/* The popup is portaled to <body>, so this must live in global CSS rather than     */
/* component-scoped CSS.                                                            */
.rz-datepicker-popup-container {
    /* OK button (uses var(--rz-secondary) directly) */
    --rz-secondary: var(--rz-primary);
    --rz-secondary-light: var(--rz-primary-light);
    --rz-secondary-lighter: var(--rz-primary-lighter);
    --rz-secondary-dark: var(--rz-primary-dark);
    --rz-secondary-darker: var(--rz-primary-darker);
    --rz-on-secondary: #ffffff;
    --rz-on-secondary-light: #ffffff;

    /* Selected day (uses these already-resolved derived variables) */
    --rz-datepicker-calendar-selected-background-color: var(--rz-primary);
    --rz-datepicker-calendar-selected-color: #ffffff;
    --rz-datepicker-calendar-selected-hover-background-color: var(--rz-primary-light);
    --rz-datepicker-calendar-selected-hover-color: #ffffff;
}

/* Belt-and-braces: also recolour the selected day cell directly, in case the theme
   resolved the background straight onto the element rather than via the variable. */
.rz-datepicker-popup-container .rz-calendar-view td .rz-state-active,
.rz-datepicker-popup-container .rz-calendar-view td .rz-state-active.rz-calendar-today {
    background-color: var(--rz-primary);
    color: #ffffff;
}

/* The month and year selectors in the calendar header inherit a very small font.
   Bump them so they are legible (matching the rest of the calendar). */
.rz-datepicker-popup-container .rz-calendar-month-dropdown,
.rz-datepicker-popup-container .rz-calendar-year-dropdown,
.rz-datepicker-popup-container .rz-calendar-month-dropdown .rz-dropdown-label,
.rz-datepicker-popup-container .rz-calendar-year-dropdown .rz-dropdown-label {
    font-size: 0.875rem;
}



/*--------------------------------------------------------------------------------*/
/* Reports                                                                        */
/*--------------------------------------------------------------------------------*/
/* Use this "@media print" section for setting the global properties when in print mode for the Report component */
@media print {

    /*.ww-report-page {
        color: orange;
    }*/

    /* Hide the side bar and header when we go goto print mode for the Report component */
    .rz-layout .rz-sidebar {
        display: none;
    }

    .rz-layout .rz-header {
        display: none;
    }

    /* Release Radzen layout containers so content can flow across multiple printed pages.
       Without this, .rz-layout / .rz-body / .rz-main are constrained to 100vh with overflow:auto,
       which causes the browser to clip the report at one printed page. */
    html, body {
        height: auto !important;
        overflow: visible !important;
    }

    .rz-layout,
    .rz-body,
    .rz-main,
    .rz-content,
    .page,
    main,
    article {
        display: block !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        overflow: visible !important;
        position: static !important;
    }

    /* Force rows to break between pages cleanly */
    .rz-datatable-tbody > tr {
        page-break-inside: avoid;
        break-inside: avoid;
    }

    .rz-datatable-tbody {
        display: table-row-group;
    }

    .rz-datatable-table {
        page-break-inside: auto;
    }

    /* Optional: ensure header is repeated */
    thead {
        display: table-header-group;
    }

    tfoot {
        display: table-footer-group;
    }

    .special-character-popup {
        display: none;
        position: absolute;
        overflow: hidden;
        height: 360px;
        width: 600px;
        border: var(--rz-panel-border);
        background-color: var(--rz-panel-background-color);
        box-shadow: var(--rz-panel-shadow);
        border-radius: var(--rz-border-radius)
    }
}