/* E/C Schedule tab (dw_engineering_schedule.xhtml), "interval grid" layout.
   First / Total A/C / Repeat / Limit share one column grid so each hours,
   cycles and days value lines up with its counterpart; the remaining
   settings sit in four cards below. Everything is scoped under .emro-ecs and
   uses plain cell classes (no Bootstrap col-*), so the detail-field-fit
   sheets, which key off col-md-*, leave these fields alone. */

.emro-ecs {
    --ecs-border: var(--emro-color-border, #c7d2dc);
    --ecs-divider: color-mix(in srgb, var(--emro-color-border, #c7d2dc) 55%, transparent);
    --ecs-surface: var(--emro-color-surface, #ffffff);
    --ecs-muted: var(--emro-color-text-muted, #526577);
    --ecs-counter: var(--emro-color-action-soft, #eff6ff);
    --ecs-counter-border: color-mix(in srgb, var(--emro-color-action, #2563eb) 45%, var(--emro-color-border, #c7d2dc));
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 8px;
    padding-bottom: 16px;
}

.emro-ecs .ui-panel.panel-no-border,
.emro-ecs .ui-panel.panel-no-border > .ui-panel-content {
    padding: 0;
    border: 0;
    background: transparent;
}

.emro-ecs .ui-panel.updDw > .ui-panel-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Plain cells: fill their track, never float. */
.emro-ecs .emro-ecs-cell {
    float: none;
    width: auto;
    min-width: 0;
    padding: 0;
    margin: 0;
}

.emro-ecs .emro-ecs-cell .ui-outputlabel {
    display: inline-block;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    margin-bottom: 4px;
    line-height: 1.25;
}

.emro-ecs .emro-ecs-cell :is(input.ui-inputfield, .ui-selectonemenu, .ui-calendar, .ui-inputnumber) {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.emro-ecs .emro-ecs-cell .ui-calendar:has(> .ui-datepicker-trigger) {
    display: inline-flex;
}

.emro-ecs .emro-ecs-cell .ui-calendar > input.ui-inputfield {
    flex: 1 1 0%;
    min-width: 0;
}

/* Checkboxes: drop the template's leading <br/> and sit on the input baseline. */
.emro-ecs .emro-ecs-check br {
    display: none;
}

.emro-ecs .emro-ecs-check {
    display: flex;
    align-items: center;
    min-height: 2.5rem;
}

.emro-ecs .emro-ecs-action {
    float: none;
    width: auto;
    padding: 0;
    display: flex;
    align-items: flex-end;
}

/* Header strip: effective date and the top-level actions. */
.emro-ecs-top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
}

.emro-ecs .emro-ecs-date {
    width: 13rem;
}

.emro-ecs .emro-ecs-small {
    width: 8rem;
}

/* Cards */
.emro-ecs-card {
    background: var(--ecs-surface);
    border: 1px solid var(--ecs-border);
    border-radius: 10px;
    padding: 16px 20px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.emro-ecs-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px;
}

.emro-ecs-card-head > .emro-ecs-title {
    flex-grow: 1;
    align-self: center;
}

.emro-ecs-title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.3;
}

.emro-ecs-row-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.emro-ecs-row-name {
    font-weight: 600;
    font-size: 1rem;
}

.emro-ecs-divided {
    border-top: 1px solid var(--ecs-divider);
    padding-top: 12px;
    margin-top: 4px;
}

/* The interval grid:
   row title | Hours | Cycles | Counter | Counter type | Days | EOM | Date | Whichever.
   Every row group (First, Repeat, Limit) is its own grid, so the tracks are
   width-bounded rather than content-sized: the same card width resolves to
   the same columns in each group and they line up. Tracks shrink toward
   their minimum on a narrow tab instead of overflowing the card, and the
   last track takes what is left. Counter and Counter type are auto tracks:
   when this E/C uses no counter their cells are removed below and the
   tracks collapse. Field names show on the First Schedule row only. */
.emro-ecs-grid {
    display: grid;
    grid-template-columns:
        minmax(8.5rem, 12rem)
        minmax(5.5rem, 8rem)
        minmax(5.5rem, 8rem)
        auto
        auto
        minmax(8rem, 10.5rem)
        4.75rem
        minmax(7.5rem, 10rem)
        minmax(8rem, 1fr);
    column-gap: 10px;
    row-gap: 10px;
    align-items: end;
}

.emro-ecs-grid > .emro-ecs-row-label { grid-column: 1; }
.emro-ecs-grid > .emro-ecs-c-hours   { grid-column: 2; }
.emro-ecs-grid > .emro-ecs-c-cycles  { grid-column: 3; }
.emro-ecs-grid > .emro-ecs-c-counter { grid-column: 4; width: 8.5rem; }
.emro-ecs-grid > .emro-ecs-c-type    { grid-column: 5; width: 11rem; }
.emro-ecs-grid > .emro-ecs-c-days    { grid-column: 6; }
.emro-ecs-grid > .emro-ecs-c-eom     { grid-column: 7; }
.emro-ecs-grid > .emro-ecs-c-date    { grid-column: 8; }
.emro-ecs-grid > .emro-ecs-c-which   { grid-column: 9; }

/* A field the data window hides (display:none on its inner box) takes no cell. */
.emro-ecs-grid > .emro-ecs-cell:has(> div[style*="display: none"]),
.emro-ecs-grid > .emro-ecs-cell:has(> div[style*="display:none"]) {
    display: none;
}

.emro-ecs-row-label {
    align-self: end;
    min-height: 2.5rem;
    display: flex;
    align-items: center;
    font-weight: 600;
    font-size: 0.9375rem;
}

.emro-ecs-counter-label {
    padding-left: 12px;
}

.emro-ecs-with-button {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    min-width: 0;
}

.emro-ecs-with-button > .emro-ecs-cell {
    flex: 1 1 auto;
}

/* Rows without the calendar button keep the days input the same width as
   the rows that have it. */
.emro-ecs-counter-days::after {
    content: "";
    flex: 0 0 2.5rem;
}

.emro-ecs .emro-ecs-c-eom {
    white-space: nowrap;
}

.emro-ecs-which {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    column-gap: 12px;
    row-gap: 4px;
    min-width: 0;
}

.emro-ecs-which > .emro-ecs-cell:first-child {
    width: 9rem;
}

/* Total A/C counters read as a pair with the interval above them. */
.emro-ecs .emro-ecs-counter input.ui-inputfield {
    background: var(--ecs-counter) !important;
    border-color: var(--ecs-counter-border) !important;
}

.emro-ecs .emro-ecs-counter .ui-outputlabel,
.emro-ecs-counter-label {
    color: var(--ecs-muted);
}

/* Settings cards below the grid */
.emro-ecs-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
}

.emro-ecs-triple {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.emro-ecs .emro-ecs-radio .ui-selectoneradio td {
    padding: 2px 0;
}

@media (max-width: 1280px) {
    .emro-ecs-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 960px) {
    .emro-ecs-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .emro-ecs-grid > [class*="emro-ecs-c-"],
    .emro-ecs-grid > .emro-ecs-row-label {
        grid-column: auto;
    }

    .emro-ecs-grid > .emro-ecs-row-label {
        grid-column: 1 / -1;
        padding-bottom: 0;
    }

    .emro-ecs-counter-days::after {
        display: none;
    }
}

@media (max-width: 640px) {
    .emro-ecs-cards,
    .emro-ecs-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ------------------------------------------------------------------------
   E/C Schedule Control and Schedule Controlled By tabs
   (dw_engineering_schedule_control.xhtml, dw_engineering_schedule_controled_by.xhtml),
   "link table" layout: one column per field under a real header, dashes for
   fields the row's control type does not use. Scoped under .emro-ecl. */

.emro-ecl {
    --ecl-muted: var(--emro-color-text-muted, #526577);
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 6px;
}

.emro-ecl-intro {
    margin: 0;
    color: var(--ecl-muted);
    font-size: 0.9375rem;
}

.emro-ecl .ui-panel.panel-no-border,
.emro-ecl .ui-panel.panel-no-border > .ui-panel-content {
    padding: 0;
    border: 0;
    background: transparent;
}

.emro-ecl .emro-ecl-table td {
    vertical-align: middle;
    padding-top: 8px;
    padding-bottom: 8px;
}

.emro-ecl .emro-ecl-open    { width: 3.5rem; }
.emro-ecl .emro-ecl-control { width: 17rem; }
.emro-ecl .emro-ecl-ec      { width: 15rem; }
.emro-ecl .emro-ecl-num     { width: 8rem; }
.emro-ecl .emro-ecl-flag    { width: 7rem; text-align: center; }

.emro-ecl .emro-ecl-cell {
    float: none;
    width: 100%;
    min-width: 0;
    padding: 0;
    margin: 0;
}

.emro-ecl .emro-ecl-cell :is(input.ui-inputfield, .ui-selectonemenu, .ui-spinner) {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.emro-ecl-ec-cell {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.emro-ecl-ec-cell > .emro-ecl-cell {
    flex: 1 1 auto;
}

.emro-ecl-prefix {
    flex-shrink: 0;
    color: var(--ecl-muted);
    font-size: 0.875rem;
    font-weight: 600;
}

/* The column header names the checkbox; keep its label for screen readers only. */
.emro-ecl .emro-ecl-check br {
    display: none;
}

.emro-ecl .emro-ecl-check {
    display: flex;
    justify-content: center;
}

.emro-ecl .emro-ecl-check .ui-chkbox-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.emro-ecl-na {
    display: block;
    text-align: center;
    color: var(--ecl-muted);
}

.emro-ecl-action-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

/* ------------------------------------------------------------------------
   "Link an E/C" composer above the Schedule Control and Linked tables
   (trax/engineering_objects/ec_link_composer.xhtml). Scoped under .emro-ecc. */

.emro-ecc {
    --ecc-border: var(--emro-color-border, #c7d2dc);
    --ecc-muted: var(--emro-color-text-muted, #526577);
    --ecc-action: var(--emro-color-action, #2563eb);
    --ecc-soft: var(--emro-color-surface-muted, #f5f8fa);
    background: var(--emro-color-surface, #ffffff);
    border: 1px solid var(--ecc-border);
    border-radius: 10px;
    padding: 16px 20px;
    margin: 8px 0 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.emro-ecc-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.emro-ecc-title {
    margin: 0;
    flex-grow: 1;
    font-size: 1.125rem;
    font-weight: 700;
}

.emro-ecc-dir,
.emro-ecc-none,
.emro-ecc-will {
    color: var(--ecc-muted);
    font-size: 0.875rem;
}

.emro-ecc-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.emro-ecc-step {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.emro-ecc-num {
    flex-shrink: 0;
    width: 1.625rem;
    height: 1.625rem;
    border-radius: 50%;
    background: var(--emro-color-text, #172737);
    color: var(--emro-color-text-inverse, #ffffff);
    font-weight: 700;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.emro-ecc-step-body {
    flex-grow: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.emro-ecc-label {
    font-size: 0.875rem;
    font-weight: 600;
}

.emro-ecc-group {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.emro-ecc-group-name {
    flex: 0 0 7.5rem;
    padding-top: 7px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ecc-muted);
}

.emro-ecc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.emro-ecc .ui-button.emro-ecc-chip {
    height: 2.125rem;
    border-radius: 17px;
    border: 1px solid var(--emro-color-border-strong, #8ea2b4);
    background: var(--emro-color-surface, #ffffff);
    color: var(--emro-color-text, #172737);
}

.emro-ecc .ui-button.emro-ecc-chip .ui-button-text {
    padding: 0 12px;
    font-weight: 400;
}

.emro-ecc .ui-button.emro-ecc-chip.emro-ecc-chip-on {
    background: var(--ecc-action);
    border-color: var(--ecc-action);
    color: var(--emro-color-text-inverse, #ffffff);
}

.emro-ecc .ui-button.emro-ecc-chip.emro-ecc-chip-on .ui-button-text {
    font-weight: 600;
}

.emro-ecc-explain {
    margin: 2px 0 0;
    padding: 7px 12px;
    border-radius: 6px;
    background: var(--ecc-soft);
    font-size: 0.9375rem;
}

.emro-ecc-row {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 24px;
}

.emro-ecc-target {
    flex: 0 1 32rem;
    min-width: 16rem;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.emro-ecc .emro-ecc-search,
.emro-ecc .emro-ecc-search input.ui-inputfield {
    width: 100%;
    box-sizing: border-box;
}

.emro-ecc-settings {
    flex: 1 1 18rem;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.emro-ecc-fields {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px;
}

.emro-ecc-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.8125rem;
    color: var(--ecc-muted);
}

.emro-ecc .emro-ecc-num-input input.ui-inputfield {
    width: 5.5rem;
    text-align: right;
}

.emro-ecc-checks {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 2px;
}

.emro-ecc-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    border-top: 1px solid color-mix(in srgb, var(--ecc-border) 60%, transparent);
    padding-top: 12px;
}

.emro-ecc-preview {
    flex-grow: 1;
    min-width: 0;
    font-size: 1rem;
}

.emro-ecc .ui-button.emro-ecc-add {
    background: var(--ecc-action);
    border-color: var(--ecc-action);
    color: var(--emro-color-text-inverse, #ffffff);
}

.emro-ecc .ui-button.emro-ecc-add .ui-button-text {
    font-weight: 600;
}

@media (max-width: 640px) {
    .emro-ecc-group {
        flex-direction: column;
        gap: 4px;
    }

    .emro-ecc-group-name {
        flex-basis: auto;
        padding-top: 0;
    }
}

/* ------------------------------------------------------------------------
   E/C General and Other tabs (dw_engineering_eu.xhtml, dw_engineering_other.xhtml,
   and the General tab's extra content in oux_engineering_eu.xhtml): fields grouped
   into titled cards. Scoped under .emro-ecg; cells carry no Bootstrap col-*
   classes, so the detail-field-fit sheets leave them alone. */

.emro-ecg {
    --ecg-border: var(--emro-color-border, #c7d2dc);
    --ecg-muted: var(--emro-color-text-muted, #526577);
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 8px;
}

.emro-ecg.emro-ecg-extra {
    padding-top: 16px;
}

.emro-ecg-card {
    background: var(--emro-color-surface, #ffffff);
    border: 1px solid var(--ecg-border);
    border-radius: 10px;
    padding: 14px 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.emro-ecg-title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.3;
}

.emro-ecg-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.emro-ecg-card-head > .emro-ecg-title {
    flex-grow: 1;
}

.emro-ecg-tools {
    display: flex;
    align-items: center;
    gap: 4px;
}

.emro-ecg-note {
    margin: -4px 0 2px;
    color: var(--ecg-muted);
    font-size: 0.875rem;
}

.emro-ecg-cols {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.emro-ecg-cols3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
}

.emro-ecg-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.emro-ecg-grid2,
.emro-ecg-grid3 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
    align-items: end;
}

.emro-ecg-grid3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.emro-ecg-grid2 > .emro-ecg-span2,
.emro-ecg-grid2 > .emro-ecg-cell.emro-ecg-span2 {
    grid-column: 1 / -1;
}

/* FR and FC sit in the grid as two ordinary cells. */
.emro-ecg-pair {
    display: contents;
}

.emro-ecg-ata {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 8rem));
    gap: 12px;
}

.emro-ecg-checks {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.emro-ecg-notif {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
    border-top: 1px solid color-mix(in srgb, var(--ecg-border) 60%, transparent);
}

.emro-ecg-notif:first-of-type {
    border-top: 0;
}

.emro-ecg-notif > .emro-ecg-cell {
    flex-grow: 1;
}

/* Plain cells: fill their track, never float. */
.emro-ecg .emro-ecg-cell,
.emro-ecg .emro-ecg-action,
.emro-ecg .emro-ecg-flag,
.emro-ecg .emro-ecg-qr {
    float: none;
    width: auto;
    min-width: 0;
    padding: 0;
    margin: 0;
}

.emro-ecg .emro-ecg-cell .ui-outputlabel {
    display: inline-block;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    margin-bottom: 4px;
    line-height: 1.25;
}

.emro-ecg .emro-ecg-cell :is(input.ui-inputfield, textarea.ui-inputfield, .ui-selectonemenu, .ui-calendar, .ui-inputnumber, .ui-spinner) {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.emro-ecg .emro-ecg-desc textarea.ui-inputfield {
    min-height: 7.5rem;
}

.emro-ecg .emro-ecg-check br {
    display: none;
}

.emro-ecg .emro-ecg-check {
    display: flex;
    align-items: center;
    min-height: 2rem;
}

/* Identity strip: flags, QR, E/C number, control type, status, reset action. */
.emro-ecg-id {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px 20px;
}

.emro-ecg-flags {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-self: center;
}

.emro-ecg-idmain {
    flex: 1 1 18rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.emro-ecg .emro-ecg-eo input.ui-inputfield {
    font-size: 1.375rem;
    font-weight: 700;
    height: 2.75rem;
}

.emro-ecg-sup {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    color: var(--ecg-muted);
}

.emro-ecg .emro-ecg-w-type {
    width: 11rem;
}

.emro-ecg .emro-ecg-w-status {
    width: 14rem;
}

@media (max-width: 1100px) {
    .emro-ecg-cols3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .emro-ecg-cols,
    .emro-ecg-cols3,
    .emro-ecg-grid3 {
        grid-template-columns: minmax(0, 1fr);
    }
}