/* Styling for order forms. */
/* Overrides style.css, and depends on cnd.css. */

/*
    Because I'm removing cellspacing, cellpadding, and border attributes from 
    (HTML) <table> elements, these are needed.
*/
table:not(.dg):not(.gv) {
    border-collapse: collapse;
    border-spacing: 0;
}

/* Wizard Steps 1-3 */
.WizardButtonIndustrial,
.WizardButtonResidential,
.WizardButtonInactive {
    font-family: var(--cnd-font-slab);
    font-size: var(--cnd-text-md);
    padding: 0 var(--cnd-space-lg) 0 0;
    border-right: none;
}

.WizardButtonIndustrial {
    color: var(--cnd-green);
}

.WizardButtonResidential {
    color: var(--cnd-blue);
}

.WizardButtonInactive {
    color: var(--cnd-gray-light);
}

/*
    Do not use the (grayed) images/Buttons/*Disable.png buttons,
    but their normal versions instead, with a lesser opacity.
*/
.ImageButtonIcon[disabled] {
    opacity: 0.5;
    cursor: default;
}

/* For clarity, some green/blue buttons may be grayed. */
.ImageButtonIcon.cnd-grayed {
    filter: grayscale(1);
}

/* Give sections for internal users a reddish background */
.cnd-intern {
    background: color-mix(in srgb, var(--cnd-red) 25%, transparent);
}

/* A yellowish color to mark things */
.cnd-mark {
    background: color-mix(in srgb, var(--cnd-yellow) 50%, transparent);
}

/* Give the Calculation sections the page background color */
body:has(.tab-activeIndustrial) .Calculation {
    background: oklch(from var(--cnd-green) 56% 0.015 h);
}

body:has(.tab-activeResidential) .Calculation {
    background: oklch(from var(--cnd-blue) 56% 0.015 h);
}

/* Give controls a dark/green/blue accent color */
input {
    accent-color: var(--cnd-gray-dark);
}

body:has(.tab-activeIndustrial) input {
    accent-color: var(--cnd-green);
}

body:has(.tab-activeResidential) input {
    accent-color: var(--cnd-blue);
}

/* Add green/blue button variants */
.cnd-button {
    background-color: var(--cnd-gray-dark) !important;
}

body:has(.tab-activeIndustrial) .cnd-button {
    background-color: var(--cnd-green) !important;
}

body:has(.tab-activeResidential) .cnd-button {
    background-color: var(--cnd-blue) !important;
}

/* Give input elements and textboxes a more consistent appearance */
:where(input:not([type=image]), select, textarea) {
    font-family: var(--cnd-font-sans1);
    font-size: var(--cnd-text-sm) !important;
    color: var(--cnd-black);
    border: 1.5px solid #0005;
    border-radius: 2px;
    margin: 2px;
}

/* Consistently gray out disabled controls */
:where(input:not([type=image])[disabled], select[disabled], textarea[disabled]) {
    background: var(--cnd-gray-accent);
    opacity: 1 !important;
}

/* In the Calculation area, graying out needs to be a bit stronger */
.Calculation :where(input:not([type=image])[disabled], select[disabled], textarea[disabled]) {
    background: #fff8;
    color: var(--cnd-gray-dark) !important;
}

:where(input:not([type=image])) {
    padding: 3px 5px;
}

select {
    padding: 2px 0;
}

textarea {
    padding: 5px;
}

/* Vertically align checkbox and radio buttons with their labels */
.standard-text input[type="checkbox"],
.standard-text input[type="radio"] {
    vertical-align: middle;
    margin-right: var(--cnd-space-sm);
}

/* (but asp:RadionButtonList elements need this) */
.cnd-valign-m * {
    vertical-align: middle !important;
}

.standard-text label {
    vertical-align: middle;
}

/* Remove the bold from labels */
.standard-label {
    font-size: var(--cnd-text-sm);
    font-weight: var(--cnd-weight-light);
    color: var(--cnd-black);
}

/* Make heading more consistent */
.standard-labelHeader {
    font-size: var(--cnd-text-md);
    /* Headings need whitespace */
    display: block;
    padding-bottom: var(--cnd-space-md);
}

.cnd-label-error {
    font-size: var(--cnd-text-sm);
    color: var(--cnd-red) !important;
}

/* Use accent labels (if you must) */
.cnd-accent-label {
    color: var(--cnd-gray-medium);
    font-size: var(--cnd-text-sm);
    font-weight: var(--cnd-weight-bold);
}

.cnd-accent-heading {
    font-size: var(--cnd-text-md);
    font-weight: var(--cnd-weight-black);
}

body:has(.tab-activeIndustrial) .cnd-accent-label,
body:has(.tab-activeIndustrial) .cnd-accent-heading {
    color: var(--cnd-green);
}

body:has(.tab-activeResidential) .cnd-accent-label,
body:has(.tab-activeResidential) .cnd-accent-heading {
    color: var(--cnd-blue);
}

/* Override more legacy classes (simplest fix for many occurances) */
.standard-labelWhiteRed {
    font-size: var(--cnd-text-sm);
    font-weight: var(--cnd-weight-bold);
    background-color: var(--cnd-red);
    /* a bit of whitespace makes it look better */
    box-sizing: border-box;
    padding: 2px;
    margin: 2px;
}

/* 
    Borders
    (to make section dividers in forms lighter, less, and attribute-free)
*/

:root {
    --cnd-forms-border-color: color-mix(in srgb, black 15%, white);
    --cnd-forms-border: 2px solid var(--cnd-forms-border-color);
    --cnd-forms-hover-color: color-mix(in srgb, black 4%, white);
}

.cnd-border-color {
    border-color: var(--cnd-forms-border-color) !important;
}

.cnd-background-color {
    background-color: var(--cnd-forms-border-color) !important;
}

.cnd-border {
    border: var(--cnd-forms-border);
}

.cnd-border-y {
    border-top: var(--cnd-forms-border);
    border-bottom: var(--cnd-forms-border);
}

.cnd-border-t {
    border-top: var(--cnd-forms-border);
}

.cnd-dash-t {
    border-top: var(--cnd-forms-border);
    border-top-style: dashed;
}

.cnd-dots-t {
    border-top: var(--cnd-forms-border);
    border-top-style: dotted;
}

.cnd-border-r {
    border-right: var(--cnd-forms-border);
}

.cnd-border-b {
    border-bottom: var(--cnd-forms-border);
}

.cnd-dash-b {
    border-bottom: var(--cnd-forms-border);
    border-bottom-style: dashed;
}

.cnd-dots-b {
    border-bottom: var(--cnd-forms-border);
    border-bottom-style: dotted;
}

.cnd-border-l {
    border-left: var(--cnd-forms-border);
}

.cnd-dash-l {
    border-left: var(--cnd-forms-border);
    border-left-style: dashed;
}

.cnd-dash-between > :nth-child(n + 2) {
    border-top: var(--cnd-forms-border);
    border-top-style: dashed;
}

/* 
    Padding
    (to give more relaxed spacing between controls and section divider)
*/

:root {
    --cnd-forms-spacing: var(--cnd-space-md);
}

/* Add padding to standard labels (to move them away from the left edges of input elements. */
.standard-label {
    padding-right: var(--cnd-forms-spacing);
}

.cnd-padding {
    padding: var(--cnd-forms-spacing);
}

.cnd-padding-y {
    padding-top: var(--cnd-forms-spacing);
    padding-bottom: var(--cnd-forms-spacing);
}

.cnd-padding-x {
    padding-right: var(--cnd-forms-spacing);
    padding-left: var(--cnd-forms-spacing);
}

.cnd-padding-t {
    padding-top: var(--cnd-forms-spacing);
}

.cnd-padding-t2 {
    padding-top: calc(var(--cnd-forms-spacing) * 2);
}

.cnd-padding-r {
    padding-right: var(--cnd-forms-spacing);
}

.cnd-padding-r2 {
    padding-right: calc(var(--cnd-forms-spacing) * 2);
}

.cnd-padding-b {
    padding-bottom: var(--cnd-forms-spacing);
}

.cnd-padding-b2 {
    padding-bottom: calc(var(--cnd-forms-spacing) * 2);
}

.cnd-padding-l {
    padding-left: var(--cnd-forms-spacing);
}

/*
    Margin
*/
.cnd-margin {
    margin: var(--cnd-forms-spacing);
}

.cnd-margin-t {
    margin-top: var(--cnd-forms-spacing);
}

/*
    Flexbox
*/
.cnd-flex {
    display: flex;
    align-items: center;
    gap: var(--cnd-forms-spacing);
}

.cnd-flex-t {
    display: flex;
    align-items: flex-start;
    gap: var(--cnd-forms-spacing);
}

/*
    Calculation area
*/

/* Make input fields not fight for space (i.e. overlap) */
.Calculation * {
    box-sizing: border-box;
}

/* Remove borders from controls inside the Calculation sections */
.Calculation input {
    border-color: transparent;
    margin: 1px 2px 1px 0;
}

/*
    Popup messages
    (meant to replace the existing styling)

    .cnd-modal-background {
        background: color-mix(in srgb, var(--cnd-gray-dark) 50%, transparent);
    }

    body:has(.tab-activeIndustrial) {
        .cnd-modal-background {
            background: color-mix(in srgb, var(--cnd-green) 50%, transparent);
        }
    }

    body:has(.tab-activeResidential) {
        .cnd-modal-background {
            background: color-mix(in srgb, var(--cnd-green) 50%, transparent);
        }
    }

    .cnd-modal-popup {
        background: var(--cnd-white);
        color: var(--cnd-black);
        border-radius: var(--cnd-radius-md);
        padding: var(--cnd-space-md) var(--cnd-space-lg);
    }

    .cnd-modal-message {
        font-family: var(--cnd-font-sans1);
        font-size: var(--cnd-text-md);
    }
*/

/* Give dialog buttons a minimum width for easier clicking
   (60px is commonly added via the Width attribute, but not everywhere) */
.CommandButtonIndustrial,
.CommandButtonResidential {
    min-width: 60px !important;
}
/*

*/
.cnd-error-hint {
    outline: 2px solid var(--cnd-red);
    outline-offset: 1px;
}

/* 
    Collapsible sections
*/

/* Use flexbox for aligning the button header. */
.cnd-collapsible > a {
    display: flex !important;
    align-items: center;
    gap: var(--cnd-space-md);
    text-decoration: none;
    color: var(--cnd-black);
}

/* Add a hover color. */
    .cnd-collapsible > a:hover {
        background-color: var(--cnd-forms-hover-color);
    }

/* Give the collapse buttons an round outline style. */
.cnd-collapsible .collapseButtonImage {
    border: 1.5px solid var(--cnd-gray-medium);
    border-radius: var(--cnd-radius-lg);
    width: 1em;
    padding: 0;
}

/* Override padding of the button header (cnd-padding does not seem to work). */
.cnd-collapsible .componentrow td {
    padding: var(--cnd-forms-spacing);
}

/* Make all backgrounds in the collapsible area white. */
.luxelineFieldLayout,
.luxelineFieldLayout-FieldsPanel,
.luxelineFieldLayout-WindowPosition,
.luxelineFieldLayout-VerticalFieldsPanel {
    background-color: unset;
}

.cnd-collapsible .luxelineFieldLayout-FieldsPanel {
    border-top: 2px dotted var(--cnd-forms-border-color);
}

/* Add a bit of padding to nested Field (widths). s*/
.luxelineFieldLayout-WindowPosition,
.luxelineFieldLayout-VerticalFieldsPanel {
    padding: 0 var(--cnd-space-lg);
}

/* Add whitespace around dynamic parts #1. */
.cnd-collapsible .luxelineFieldLayout,
.cnd-collapsible .luxelineFieldLayout-FieldsPanel,
.cnd-collapsible .luxelineFieldLayout-FieldsPanel > table:nth-child(n + 2) {
    padding: var(--cnd-space-md) 0;
}

/* Add whitespace around dynamic parts #2. */
.cnd-collapsible .luxelineFieldLayout-FieldsPanel {
    margin: var(--cnd-space-md) 0;
}

/*
    Luxe-Line
*/

a.luxelinetemplate {
    /* Improve the link click target */
    padding: none;
    display: block;
    /* Balance the whitespace a bit more */
    padding: 0.5rem 2rem;
}

/* Add a hover effect on the click targets. */
td:has(> a.luxelinetemplate > img[src*="images/Doorconstruction/luxeline/templates"]):hover {
    background-color: #0001;
    background: white;
    filter: brightness(0.95);
}

/*
    There is no image for Single types in Luxe-Line. 
    (this hack makes up for a missing image)
*/
td.cnd-luxeline-single-fix {
    box-sizing: border-box;
    width: 266px;
}