/**
 * SCHAKO Portal UI — Unified Calculator Styling
 *
 * Last updated: 2026-03-16
 * ═══════════════════════════════════════════════════════════════════════════
 */

/* ══════════════════════════════════════════════════════════════
   CSS Custom Properties (Design Tokens)
   ══════════════════════════════════════════════════════════════ */

:root {
    --schako-green: #2e7d32;
    --schako-green-light: #43a047;
    --schako-green-bg: rgba(46,125,50,.06);
    --schako-border: #e0e0e0;
    --schako-border-light: #f0f0f0;
    --schako-text: #212121;
    --schako-text-secondary: #616161;
    --schako-text-hint: #9e9e9e;
    --schako-bg: #ffffff;
    color-scheme: light !important;
}

#formDIF {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--schako-text);
    background: var(--schako-bg);
    color-scheme: light;
}

#formDIF,
#formDIF * {
    color-scheme: light !important;
}

/* ══════════════════════════════════════════════════════════════
   Accordion: flat sections with thin green underline
   ══════════════════════════════════════════════════════════════ */

#formDIF .accordion-item {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible;
}

#formDIF .accordion-item:not(:last-of-type) {
    margin-bottom: 0;
    border-bottom: 1px solid var(--schako-border-light) !important;
}

#formDIF .accordion-item:not(:first-of-type) {
    border-top: none !important;
}

#formDIF .accordion-button {
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: .01em;
    text-transform: none;
    color: var(--schako-green);
    background: transparent;
    padding: 1rem 0;
    border-bottom: 2px solid transparent;
    transition: all .2s ease;
    border-radius: 0;
}

#formDIF .accordion-button:not(.collapsed) {
    background: transparent;
    color: var(--schako-green);
    box-shadow: none !important;
    border-bottom-color: var(--schako-green);
}

#formDIF .accordion-button::after {
    filter: hue-rotate(100deg) brightness(.55);
}

#formDIF .accordion-button:focus {
    box-shadow: none;
    outline: none;
}

#formDIF .accordion-body {
    padding: 1.5rem 0 1.25rem;
}

/* Accordion disabled state — subtle visual differentiation */
#formDIF .accordion-item.disabled,
#formDIF .accordion-item[disabled],
#formDIF .accordion-item:has(.accordion-button[disabled]),
#formDIF .accordion-item:has(.accordion-button.disabled) {
    opacity: .6;
}

#formDIF .accordion-item.disabled .accordion-button,
#formDIF .accordion-item[disabled] .accordion-button,
#formDIF .accordion-button[disabled],
#formDIF .accordion-button.disabled {
    color: var(--schako-text-hint) !important;
    font-style: italic;
    cursor: not-allowed;
    pointer-events: none;
    border-bottom-color: transparent !important;
}

#formDIF .accordion-button[disabled]:not(.collapsed),
#formDIF .accordion-button.disabled:not(.collapsed) {
    border-bottom-color: var(--schako-border) !important;
}

#formDIF .accordion-item.disabled .accordion-button::after,
#formDIF .accordion-item[disabled] .accordion-button::after,
#formDIF .accordion-button[disabled]::after,
#formDIF .accordion-button.disabled::after {
    opacity: .35;
    filter: grayscale(1);
}
/* Accordion header with inline code display */
#formDIF .accordion-header.d-flex {
    position: relative;
}

#formDIF .accordion-header.d-flex .accordion-button {
    width: 100%;
}

#formDIF .accordion-header.d-flex code {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: 'SF Mono', 'Consolas', 'Liberation Mono', monospace;
    font-size: 0.85rem;
    font-weight: 600;
    color: #37474f;
    letter-spacing: -0.01em;
    white-space: nowrap;
    pointer-events: none; /* permite click a través del código */
    padding: 4px 12px;
}

#formDIF .accordion-header.d-flex code:empty {
    display: none;
}
/* ══════════════════════════════════════════════════════════════
   Form Labels
   ══════════════════════════════════════════════════════════════ */

#formDIF .form-label {
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--schako-text);
    margin-bottom: .375rem;
}

/* Small inline labels (x, y, l/h, dB(A), W, etc.) */
#formDIF .small,
#formDIF small,
#formDIF span.small {
    font-weight: 600;
}

/* Section headers (h6 titles like Filter, Vena de aire) */
#formDIF h6.border-bottom {
    font-weight: 700 !important;
}

/* ══════════════════════════════════════════════════════════════
   Form Controls: subtle, round, thin border
   ══════════════════════════════════════════════════════════════ */

#formDIF .form-control,
#formDIF .form-select {
    font-size: .875rem;
    border: 1px solid var(--schako-border);
    border-radius: .5rem;
    padding: .5rem .75rem;
    color: var(--schako-text);
    background-color: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}

#formDIF .form-control:focus,
#formDIF .form-select:focus {
    border-color: #424242;
    box-shadow: 0 0 0 2px rgba(0,0,0,.08);
    outline: none;
}

#formDIF .form-control::placeholder {
    color: var(--schako-text-hint);
}

/* ══════════════════════════════════════════════════════════════
   Select Styling: Cross-browser white background fix
   Firefox requires individual properties, NOT background shorthand
   ══════════════════════════════════════════════════════════════ */

#formDIF select,
#formDIF select.form-select,
#formDIF .form-select,
#formDIF .input-group select,
#formDIF .input-group-text.form-select {
    background-color: #fff !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right .75rem center !important;
    background-size: 16px 12px !important;
    color: var(--schako-text) !important;
    color-scheme: light !important;
    forced-color-adjust: none !important;
    -moz-appearance: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

#formDIF select option,
#formDIF select.form-select option,
#formDIF .form-select option {
    background-color: #fff !important;
    color: #212121 !important;
    forced-color-adjust: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

/* Firefox-specific fixes */
@-moz-document url-prefix() {
    html,
    body {
        color-scheme: light !important;
        background-color: #fff !important;
    }
    #formDIF select,
    #formDIF select.form-select,
    #formDIF .form-select {
        color-scheme: light !important;
        scrollbar-color: #c0c0c0 #fff;
        background-color: #fff !important;
        color: #212121 !important;
        background-image: none !important;
        -moz-appearance: menulist !important;
        appearance: auto !important;
        padding-right: .75rem !important;
    }
    #formDIF select option,
    #formDIF select.form-select option,
    #formDIF select optgroup {
        background-color: #fff !important;
        color: #212121 !important;
        forced-color-adjust: none !important;
        padding: 4px 8px;
    }
    #formDIF select option:hover,
    #formDIF select.form-select option:hover,
    #formDIF select option:checked,
    #formDIF select.form-select option:checked {
        background-color: #e8f5e9 !important;
        color: #212121 !important;
    }
}

/* ══════════════════════════════════════════════════════════════
   Input Group Text
   ══════════════════════════════════════════════════════════════ */

#formDIF .input-group-text {
    font-size: .8125rem !important;
    font-weight: 500;
    color: var(--schako-text-secondary);
    background: #fafafa;
    border: 1px solid var(--schako-border);
    border-radius: 0;
    padding: .375rem .625rem;
}

#formDIF .input-group-text:has(.form-switch) {
    background: #ffffff;
}

/* ══════════════════════════════════════════════════════════════
   Info Buttons (tooltip triggers)
   ══════════════════════════════════════════════════════════════ */

#formDIF .btn-icon,
#formDIF .btn-sm.btn-light.btn-icon {
    border: 1px solid var(--schako-border);
    border-radius: 0;
    color: var(--schako-text-hint);
    background: #fff;
    transition: all .15s ease;
}

#formDIF .btn-icon:hover,
#formDIF .btn-sm.btn-light.btn-icon:hover {
    color: var(--schako-green);
    border-color: var(--schako-green);
    background: var(--schako-green-bg);
}

/* ══════════════════════════════════════════════════════════════
   Input Group Rounded Edges
   ══════════════════════════════════════════════════════════════ */

#formDIF .input-group > * {
    border-radius: 0 !important;
}

#formDIF .input-group > :first-child {
    border-radius: .5rem 0 0 .5rem !important;
}

#formDIF .input-group > :last-child {
    border-radius: 0 .5rem .5rem 0 !important;
}

#formDIF .input-group > :only-child {
    border-radius: .5rem !important;
}

/* ══════════════════════════════════════════════════════════════
   Action Button: dark grey "Weiter" style
   ══════════════════════════════════════════════════════════════ */

#formDIF .btn-calculate,
#formDIF .btn-secondary.btn-pill {
    background: #424242 !important;
    color: #fff !important;
    border: 1px solid transparent !important;
    border-radius: .5rem !important;
    padding: .5rem 1.75rem;
    min-height: 2.5rem;
    font-weight: 600;
    font-size: .875rem;
    letter-spacing: .01em;
    box-shadow: none;
    transition: all .15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#formDIF .btn-calculate:hover,
#formDIF .btn-secondary.btn-pill:hover {
    background: #5a5a5a !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
    color: #fff !important;
    border-color: transparent !important;
}

#formDIF .btn-calculate:active,
#formDIF .btn-secondary.btn-pill:active {
    background: #212121 !important;
}

/* ══════════════════════════════════════════════════════════════
   Reset Button: ghost style (replaces template orange)
   ══════════════════════════════════════════════════════════════ */

#formDIF .btn-reset,
#formDIF .btn-outline-secondary.btn-pill,
#formDIF .btn-reset:not(:hover):not([aria-expanded="true"]):not([aria-pressed="true"]) {
    background: transparent !important;
    color: var(--schako-text-secondary) !important;
    border: 1px solid var(--schako-border) !important;
    border-radius: .5rem !important;
    padding: .5rem 1.75rem;
    min-height: 2.5rem;
    font-weight: 500;
    font-size: .875rem;
    transition: all .15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#formDIF .btn-reset:hover,
#formDIF .btn-outline-secondary.btn-pill:hover {
    color: var(--schako-text) !important;
    border-color: #424242 !important;
    background: #f5f5f5 !important;
}

#formDIF .btn-reset:active,
#formDIF .btn-outline-secondary.btn-pill:active {
    background: #e0e0e0 !important;
    color: var(--schako-text) !important;
    border-color: #424242 !important;
}

/* ══════════════════════════════════════════════════════════════
   Tabs: clean underline style
   ══════════════════════════════════════════════════════════════ */

#formDIF .nav-tabs {
    border-bottom: 1px solid var(--schako-border);
}

#formDIF .nav-tabs .nav-link {
    font-size: .875rem;
    font-weight: 500;
    padding: .75rem 1.25rem;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--schako-text-secondary);
    transition: all .15s ease;
}

#formDIF .nav-tabs .nav-link.active {
    color: var(--schako-green);
    border-bottom-color: var(--schako-green);
    font-weight: 600;
    background: transparent;
}

#formDIF .nav-tabs .nav-link:not(.active):hover {
    color: var(--schako-text);
    background: transparent;
    border-bottom-color: var(--schako-border);
}

/* ══════════════════════════════════════════════════════════════
   Operator selects (NWo - width/height comparators)
   ══════════════════════════════════════════════════════════════ */

#formDIF .select-NWo {
    max-width: 3.5rem;
    padding-left: .375rem;
    padding-right: .375rem;
}

/* ══════════════════════════════════════════════════════════════
   DataTable Wrapper: flat, no card
   ══════════════════════════════════════════════════════════════ */

#formDIF #divTabla {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    overflow: visible;
}

/* ══════════════════════════════════════════════════════════════
   DataTable: clean row styling
   Reset Bootstrap 5 striping (uses inset box-shadow)
   ══════════════════════════════════════════════════════════════ */

#formDIF .table-striped > tbody > tr > * {
    --bs-table-bg-type: initial !important;
    --bs-table-color-type: initial !important;
    box-shadow: none !important;
}

#formDIF table.dataTable {
    border-collapse: separate;
    border-spacing: 0;
    font-size: .875rem;
    --bs-table-striped-bg: transparent !important;
    --bs-table-accent-bg: transparent !important;
    --bs-table-hover-bg: transparent !important;
}

#formDIF table.dataTable thead th {
    background: #fff !important;
    color: var(--schako-text) !important;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    border-bottom: 2px solid #424242 !important;
    border-top: none !important;
    padding: .75rem .75rem;
    box-shadow: none !important;
    position: relative;
}

/* Sorting arrows: dark */
#formDIF table.dataTable thead th.sorting::before,
#formDIF table.dataTable thead th.sorting::after,
#formDIF table.dataTable thead th.sorting_asc::before,
#formDIF table.dataTable thead th.sorting_asc::after,
#formDIF table.dataTable thead th.sorting_desc::before,
#formDIF table.dataTable thead th.sorting_desc::after {
    opacity: .35 !important;
}

#formDIF table.dataTable thead th.sorting_asc::before,
#formDIF table.dataTable thead th.sorting_desc::after {
    opacity: .85 !important;
}

#formDIF table.dataTable tbody td {
    padding: .75rem .75rem;
    border-bottom: 1px solid #f0f0f0 !important;
    color: var(--schako-text) !important;
    vertical-align: middle;
    background-color: transparent;
    box-shadow: none !important;
}

/* Alternating rows */
#formDIF table.dataTable tbody tr:nth-of-type(odd) > td {
    background-color: #fff !important;
}

#formDIF table.dataTable tbody tr:nth-of-type(even) > td {
    background-color: #fafbfc !important;
}

/* Hover: subtle green tint */
#formDIF table.dataTable tbody tr:hover > td {
    background-color: rgba(46,125,50,.05) !important;
}

/* Selected row highlight */
#formDIF table.dataTable tbody tr.selected > td {
    background-color: rgba(46,125,50,.10) !important;
}

/* ══════════════════════════════════════════════════════════════
   DataTable Column Filters: hide the filter row, show in header
   ══════════════════════════════════════════════════════════════ */

#formDIF .schako-dt-search {
    display: none !important;
}

#formDIF thead th .dt-header-filter {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: .45rem;
    vertical-align: middle;
}

#formDIF thead th .dt-header-filter-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.45rem;
    height: 1.45rem;
    padding: 0;
    border: 1px solid #d9dfd9;
    border-radius: .35rem;
    background: #fff;
    color: #8d9890;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
    transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}

#formDIF thead th .dt-header-filter-btn:hover,
#formDIF thead th .dt-header-filter-btn:focus,
#formDIF thead th .dt-header-filter.is-open .dt-header-filter-btn {
    color: var(--schako-green);
    border-color: #9cc79f;
    background-color: rgba(46,125,50,.10);
    outline: none;
}

#formDIF thead th .dt-header-filter.is-active .dt-header-filter-btn {
    color: var(--schako-green);
    border-color: #7eb684;
    background-color: rgba(46,125,50,.08);
}

#formDIF thead th .dt-header-filter-panel {
    position: absolute;
    top: calc(100% + .35rem);
    left: 50%;
    transform: translateX(-50%);
    display: none;
    min-width: 6rem;
    padding: .4rem;
    background: #fff;
    border: 1px solid #dfe4df;
    border-radius: .5rem;
    box-shadow: 0 10px 24px rgba(0,0,0,.10);
    z-index: 12;
}

#formDIF thead th .dt-header-filter.is-open .dt-header-filter-panel {
    display: block;
}

#formDIF thead th .dt-header-filter-panel .form-select-dt-search {
    display: block !important;
    width: 100% !important;
    min-width: 5.25rem !important;
    margin: 0 !important;
    padding: .2rem 1.7rem .2rem .45rem !important;
    font-size: .75rem !important;
    border: 1px solid #d6ddd6 !important;
    border-radius: .4rem !important;
    background-color: #fff !important;
    color: #212121 !important;
    cursor: pointer;
    box-shadow: none !important;
}

#formDIF thead th .dt-header-filter-panel .form-select-dt-search:focus {
    border-color: var(--schako-green) !important;
    box-shadow: 0 0 0 2px rgba(46,125,50,.12) !important;
    outline: none !important;
}

/* ══════════════════════════════════════════════════════════════
   Pagination: modern connected pill style
   ══════════════════════════════════════════════════════════════ */

#formDIF .dataTables_paginate .pagination {
    gap: 0 !important;
    margin: 0 !important;
}

#formDIF .dataTables_paginate .page-link {
    border: 1px solid #e0e0e0 !important;
    border-right: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: .4rem .75rem !important;
    min-width: 1.75rem !important;
    font-size: .8125rem !important;
    font-weight: 500 !important;
    background: #fff !important;
    color: var(--schako-text) !important;
    box-shadow: none !important;
    line-height: 1.4 !important;
    text-align: center !important;
    text-decoration: none !important;
    transition: background .12s ease, color .12s ease;
}

#formDIF .dataTables_paginate .page-item {
    margin: 0 !important;
}

#formDIF .dataTables_paginate .page-item:first-child .page-link {
    border-radius: .5rem 0 0 .5rem !important;
    padding-left: .75rem !important;
}

#formDIF .dataTables_paginate .page-item:last-child .page-link {
    border-radius: 0 .5rem .5rem 0 !important;
    border-right: 1px solid #e0e0e0 !important;
    padding-right: .75rem !important;
}

#formDIF .dataTables_paginate .page-item.active .page-link,
#formDIF .dataTables_paginate .page-item.active .page-link:hover,
#formDIF .dataTables_paginate .page-item.active .page-link:focus {
    background: var(--schako-green) !important;
    color: #fff !important;
    font-weight: 600 !important;
    border-color: var(--schako-green) !important;
}

#formDIF .dataTables_paginate .page-item:not(.active):not(.disabled) .page-link:hover {
    background: #f5f5f5 !important;
    color: var(--schako-text) !important;
}

#formDIF .dataTables_paginate .page-item.disabled .page-link {
    background: #fff !important;
    color: #ccc !important;
    cursor: default !important;
}

#formDIF .dataTables_wrapper .dataTables_info {
    font-size: .8125rem;
    color: var(--schako-text-secondary);
    padding-top: .75rem;
}

/* ══════════════════════════════════════════════════════════════
   Disabled Inputs
   ══════════════════════════════════════════════════════════════ */


#formDIF .form-control:disabled,
#formDIF .form-select:disabled {
    background: #f5f5f5 !important;
    color: #9e9e9e !important;
    border-color: #e0e0e0 !important;
    cursor: not-allowed !important;
    opacity: 1 !important;
}

/* Adjacent Input Groups (Kühlen/Heizen columns): avoid double borders */
#formDIF .row > [class*="col-"]:not(:first-child) > .input-group > .form-control:first-child,
#formDIF .row > [class*="col-"]:not(:first-child) > .input-group > .form-select:first-child {
    border-top-left-radius: .5rem;
    border-bottom-left-radius: .5rem;
}

/* Stacked input rows (VW, tw1, tw2, etc.): add spacing to avoid border overlap */
#formDIF .row.col-12 {
    margin-bottom: .375rem;
}

#formDIF .row.col-12:last-child {
    margin-bottom: 0;
}

/* ══════════════════════════════════════════════════════════════
   Switch Toggle
   ══════════════════════════════════════════════════════════════ */

#formDIF .form-switch .form-check-input:not(:checked) {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23344054'/%3e%3c/svg%3e");
    background-color: #ffffff;
    border: 1px solid #98a2b3 !important;
}

#formDIF .form-check-input:checked {
    background-color: var(--schako-green);
    border-color: var(--schako-green);
}

/* ══════════════════════════════════════════════════════════════
   Product Code Display (#pCode)
   ══════════════════════════════════════════════════════════════ */

#formDIF .blockquote.bg-primary-light {
    background: #eaf2ea !important;
    border-radius: 0 .375rem .375rem 0;
    text-align: left !important;
    padding: .75rem 1rem !important;
    margin: .5rem 0 1.5rem !important;
    border: none !important;
    border-left: 4px solid var(--schako-green) !important;
}

#formDIF .blockquote.bg-primary-light #pCode,
#formDIF .blockquote.bg-primary-light code {
    display: inline-block;
    font-size: .9375rem !important;
    font-weight: 600 !important;
    font-family: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', 'SF Mono', Consolas, monospace !important;
    color: var(--schako-text) !important;
    letter-spacing: .03em;
    background: transparent;
    padding: .25rem 0;
    border-radius: 0;
    border: none;
    box-shadow: none;
}

/* ══════════════════════════════════════════════════════════════
   Validation Error Labels
   ══════════════════════════════════════════════════════════════ */

#formDIF .schako-validation-message,
#formDIF .field-validation-error,
#formDIF .text-danger {
    font-size: .75rem;
    font-weight: 500;
    color: #c62828 !important;
}

/* D601 Kühlen/Heizen Column Colors (Blue/Red) */

#formDIF table.dataTable thead th.schako-dt-blue,
#formDIF table.dataTable tbody td.schako-dt-blue {
    color: #00f !important;
}

#formDIF table.dataTable thead th.schako-dt-red,
#formDIF table.dataTable tbody td.schako-dt-red {
    color: #f00 !important;
}

#formDIF table.dataTable thead th.schako-dt-narrow,
#formDIF table.dataTable tbody td.schako-dt-narrow {
    padding-left: .25rem !important;
    padding-right: .25rem !important;
}

/* Space between SK/recycle buttons (outside accordion-body)
   and the next accordion section header below them. */
#formDIF .accordion-collapse > .row {
    margin-bottom: 1rem;
}

/* Space between the last accordion section and the
   "Auslegung bestätigen" / JR callback button below it. */
#formDIF .accordion.accordion-flush > .row {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

/* Prevent bottom margin-collapse so the JR button row
   keeps its spacing above the tab/card bottom border. */
#formDIF .accordion.accordion-flush {
    padding-bottom: 1px;
}

/* ══════════════════════════════════════════════════════════════
   Utility: Smooth Transition
   ══════════════════════════════════════════════════════════════ */

#formDIF {
    transition: opacity .2s ease;
}

/* Fix: nested <form> in _SheetTab causes browser to move tab-panes outside
   .tab-content, so Bootstrap's .tab-content > .tab-pane {display:none} fails.
   This descendant selector matches regardless of DOM restructuring. */
#formDIF .tab-pane:not(.active) {
    display: none;
}