/* ============================================================
   C&A TMS - CODIGO PROPIO

   Que hace:
   Estiliza encabezados ordenables, columnas movibles, scroll
   horizontal y footer global de tres zonas.

   Datos que recibe:
   Tabla y footer preparados por los controladores Loads.

   Resultado:
   Unit visible, indicadores de orden, movimiento lateral y
   footer alineado como Sign In.

   Donde se usa:
   Load Board Corporate Sober Light.
   ============================================================ */

.loads-corporate-main-v3 {
    grid-template-rows:
        72px
        minmax(0, 1fr)
        52px
        38px;
}

.loads-corporate-table-wrap-v3 {
    max-height:
        calc(100vh - 445px);
    overflow-x: auto;
    overflow-y: auto;
    scrollbar-gutter: stable;
}

.loads-corporate-table-v3 {
    min-width: 1680px;
}

.loads-corporate-table-v3
th[data-column-key] {
    cursor: grab;
    padding: 0;
    user-select: none;
}

.loads-corporate-table-v3
th[data-column-key]:active {
    cursor: grabbing;
}

.loads-column-sort-v2 {
    align-items: center;
    background: transparent;
    border: 0;
    color: inherit;
    display: flex;
    font-size: inherit;
    font-weight: inherit;
    gap: 0.32rem;
    justify-content: flex-start;
    min-height: 40px;
    padding: 0.58rem 0.55rem;
    text-align: left;
    white-space: nowrap;
    width: 100%;
}

.loads-column-sort-v2:hover,
.loads-column-sort-v2:focus-visible {
    background: #EEF4FF;
    color: #174EA6;
    outline: none;
}

.loads-column-sort-v2__indicator {
    color: #174EA6;
    display: inline-block;
    font-size: 0.56rem;
    min-width: 0.65rem;
}

.loads-corporate-table-v3
th.is-column-dragging {
    opacity: 0.45;
}

.loads-corporate-table-v3
th.is-column-drag-before {
    box-shadow:
        inset 3px 0 0
        #1E3A8A;
}

.loads-corporate-table-v3
th.is-column-drag-after {
    box-shadow:
        inset -3px 0 0
        #1E3A8A;
}

.loads-global-footer-v1 {
    align-items: center;
    background: #F8FAFC;
    border-top: 1px solid #DDE3EC;
    color: #667085;
    display: grid;
    font-family:
        Inter,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;
    font-size: 11px;
    gap: 1rem;
    grid-template-columns:
        minmax(0, 1fr)
        auto
        minmax(0, 1fr);
    padding: 4px 12px;
}

.loads-global-footer-v1__left {
    justify-self: start;
    min-width: 0;
}

.loads-global-footer-v1__center {
    justify-self: center;
    white-space: nowrap;
}

.loads-global-footer-v1__right {
    justify-self: end;
    white-space: nowrap;
}

.loads-global-footer-v1
.connection-indicator {
    bottom: auto;
    box-shadow: none;
    left: auto;
    margin: 0;
    max-width: 100%;
    position: static;
    right: auto;
    top: auto;
    z-index: auto;
}

.loads-global-footer-v1
.site-footer {
    color: #667085;
    font-size: 11px;
    line-height: 1.35;
    margin: 0;
    padding: 0;
    text-align: center;
}

.loads-global-footer-v1
.page-version {
    bottom: auto;
    color: #667085;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
    margin: 0;
    position: static;
    right: auto;
    z-index: auto;
}

@media (max-width: 900px) {
    .loads-corporate-main-v3 {
        grid-template-rows:
            72px
            minmax(0, 1fr)
            52px
            78px;
    }

    .loads-global-footer-v1 {
        gap: 0.4rem;
        grid-template-columns: 1fr;
        padding: 6px 10px;
        text-align: center;
    }

    .loads-global-footer-v1__left,
    .loads-global-footer-v1__center,
    .loads-global-footer-v1__right {
        justify-self: center;
    }
}

@media print {
    .loads-global-footer-v1 {
        display: none !important;
    }
}

/* ============================================================
   C&A TMS - CODIGO PROPIO
   C&A TMS - COMPACT LOAD ROWS V1

   Que hace:
   Reduce el espacio vertical de los renglones de cargas.

   Datos que recibe:
   Celdas y estados de la tabla del Load Board.

   Resultado:
   Tabla mas compacta y con mas cargas visibles.

   Donde se usa:
   Load Board Corporate Sober Light.
   ============================================================ */

.loads-corporate-table-v3
tbody td {
    line-height: 1.16;
    padding:
        0.34rem
        0.5rem;
}

.loads-corporate-table-v3
tbody td span {
    margin-top: 0.05rem;
}

.loads-corporate-table-v3
tbody td strong {
    line-height: 1.14;
}

.loads-corporate-table-v3
.loads-status-v1 {
    padding:
        0.24rem
        0.46rem;
}


/* ============================================================
   C&A TMS - CODIGO PROPIO
   LOAD BOARD COLUMN LAYOUT V0.3.0
   ============================================================ */

.loads-corporate-table-v3 {
    min-width: 2200px;
}

.loads-corporate-table-v3 [hidden] {
    display: none !important;
}

.loads-corporate-columns-v3[aria-expanded="true"] {
    background: #E8EEF9;
    border-color: #1E3A8A;
    color: #1E3A8A;
}

.loads-columns-panel-v3 {
    background: #FFFFFF;
    border: 1px solid #CBD5E1;
    border-radius: 10px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18);
    display: flex;
    flex-direction: column;
    max-height: var(--loads-columns-panel-max-height, calc(100vh - 24px));
    min-width: 280px;
    overflow: hidden;
    padding: 0.75rem;
    position: fixed;
    width: min(380px, calc(100vw - 24px));
    z-index: 12000;
}

.loads-columns-panel-v3[hidden] {
    display: none !important;
}

.loads-columns-panel-v3__header {
    align-items: flex-start;
    border-bottom: 1px solid #E2E8F0;
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.55rem;
    padding-bottom: 0.55rem;
}

.loads-columns-panel-v3__header strong {
    color: #1F2937;
    display: block;
    font-size: 0.95rem;
}

.loads-columns-panel-v3__header span {
    color: #64748B;
    display: block;
    font-size: 0.74rem;
    margin-top: 0.15rem;
}

.loads-columns-close-v3 {
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: #64748B;
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
    padding: 0.2rem 0.38rem;
}

.loads-columns-close-v3:hover,
.loads-columns-close-v3:focus-visible {
    background: #F1F5F9;
    color: #1E3A8A;
    outline: 2px solid #93C5FD;
}

.loads-columns-all-v3 {
    align-items: center;
    border-bottom: 1px solid #E2E8F0;
    color: #1F2937;
    display: flex;
    font-size: 0.82rem;
    font-weight: 700;
    gap: 0.55rem;
    padding: 0.45rem 0.35rem 0.6rem;
}

.loads-columns-options-v3 {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0.35rem 0.15rem;
    scrollbar-gutter: stable;
}

.loads-column-option-v3 {
    align-items: center;
    border: 1px solid transparent;
    border-radius: 7px;
    cursor: grab;
    display: grid;
    gap: 0.45rem;
    grid-template-columns: auto minmax(0, 1fr);
    padding: 0.38rem 0.45rem;
}

.loads-column-option-v3:hover {
    background: #F8FAFC;
    border-color: #E2E8F0;
}

.loads-column-option-v3:focus-visible {
    border-color: #2563EB;
    outline: 2px solid #BFDBFE;
}

.loads-column-option-v3__handle {
    color: #94A3B8;
    font-size: 0.9rem;
    letter-spacing: -0.18rem;
    width: 1rem;
}

.loads-column-option-v3 label {
    align-items: center;
    color: #334155;
    display: flex;
    font-size: 0.8rem;
    gap: 0.55rem;
    min-width: 0;
}

.loads-column-option-v3 label span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.loads-column-option-v3 input,
.loads-columns-all-v3 input {
    accent-color: #1E3A8A;
    height: 15px;
    width: 15px;
}

.loads-column-option-v3.is-column-drag-before {
    box-shadow: inset 0 3px 0 #1E3A8A;
}

.loads-column-option-v3.is-column-drag-after {
    box-shadow: inset 0 -3px 0 #1E3A8A;
}

.loads-columns-status-v3 {
    color: #64748B;
    font-size: 0.72rem;
    line-height: 1.35;
    margin: 0.55rem 0.15rem 0;
    min-height: 1rem;
}

.loads-columns-status-v3--loading,
.loads-columns-status-v3--saving {
    color: #1E3A8A;
}

.loads-columns-status-v3--saved {
    color: #15803D;
}

.loads-columns-status-v3--conflict {
    color: #B45309;
}

.loads-columns-status-v3--error {
    color: #B91C1C;
}

.loads-last-check-call-v3 {
    display: block;
    max-width: 230px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 760px) {
    .loads-columns-panel-v3 {
        min-width: 0;
        width: calc(100vw - 24px);
    }
}

@media print {
    .loads-corporate-columns-v3,
    .loads-columns-panel-v3 {
        display: none !important;
    }
}

/* C&A TMS - LOAD COLUMNS NIGHT MODE V1 */
html[data-ca-theme="night"] .loads-global-footer-v1,
html[data-ca-theme="night"] .loads-columns-panel-v3 {
    background: #111827;
    border-color: #334155;
    color: #DCE3ED;
}

html[data-ca-theme="night"] .loads-columns-panel-v3__header,
html[data-ca-theme="night"] .loads-columns-all-v3,
html[data-ca-theme="night"] .loads-column-option-v3 {
    border-color: #334155;
}

html[data-ca-theme="night"] .loads-columns-panel-v3__header strong,
html[data-ca-theme="night"] .loads-column-option-v3 label span {
    color: #E5E7EB;
}

html[data-ca-theme="night"] .loads-columns-panel-v3__header span,
html[data-ca-theme="night"] .loads-columns-status-v3,
html[data-ca-theme="night"] .loads-global-footer-v1 .site-footer,
html[data-ca-theme="night"] .loads-global-footer-v1 .page-version {
    color: #A8B3C5;
}

html[data-ca-theme="night"] .loads-column-option-v3:hover,
html[data-ca-theme="night"] .loads-column-option-v3:focus-visible,
html[data-ca-theme="night"] .loads-column-sort-v2:hover,
html[data-ca-theme="night"] .loads-column-sort-v2:focus-visible {
    background: #17243A;
    color: #BFDBFE;
}



/* C&A TMS - CODIGO PROPIO - COLUMNS AND FOOTER NIGHT MODE V3 APPROVED */
html[data-ca-theme="night"] .loads-global-footer-v1,
html[data-ca-theme="night"] .loads-columns-panel-v3 {
    background: var(--ca-surface);
    border-color: var(--ca-border);
    color: var(--ca-text-primary);
}

html[data-ca-theme="night"] .loads-columns-panel-v3__header,
html[data-ca-theme="night"] .loads-columns-all-v3,
html[data-ca-theme="night"] .loads-column-option-v3 {
    border-color: var(--ca-border);
}

html[data-ca-theme="night"] .loads-columns-panel-v3__header strong,
html[data-ca-theme="night"] .loads-column-option-v3 label span {
    color: var(--ca-text-primary);
}

html[data-ca-theme="night"] .loads-columns-panel-v3__header span,
html[data-ca-theme="night"] .loads-columns-status-v3,
html[data-ca-theme="night"] .loads-global-footer-v1 .site-footer,
html[data-ca-theme="night"] .loads-global-footer-v1 .page-version {
    color: var(--ca-text-secondary);
}

html[data-ca-theme="night"] .loads-column-option-v3:hover,
html[data-ca-theme="night"] .loads-column-option-v3:focus-visible,
html[data-ca-theme="night"] .loads-column-sort-v2:hover,
html[data-ca-theme="night"] .loads-column-sort-v2:focus-visible {
    background: var(--ca-hover-bg);
    color: var(--ca-primary);
}

/* ============================================================
   C&A TMS - CODIGO PROPIO
   CASES 001-009 FOOTER AND BOOLEAN INDICATORS V1
   ============================================================ */

.loads-global-footer-v1 {
    min-height: 38px;
    background: var(--ca-surface, #fff);
    border-top: 1px solid var(--ca-border, #d5dce5);
}

html[data-ca-theme="night"]
.loads-global-footer-v1 {
    background: var(--ca-surface);
    border-top-color: var(--ca-border);
}

.loads-boolean-indicator-v1 {
    display: inline-grid;
    place-items: center;
    width: 17px;
    height: 17px;
    margin-inline: auto;
    color: var(--ca-text-secondary, #667085);
    background: var(--ca-surface-raised, #fff);
    border: 1px solid var(--ca-border, #cbd5e1);
    border-radius: 3px;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
}

.loads-boolean-indicator-v1--true {
    color: #FFFFFF;
    background: var(--ca-success, #15803d);
    border-color: var(--ca-success, #15803d);
}

.loads-boolean-indicator-v1--false {
    color: transparent;
}

.loads-boolean-indicator-v1--null {
    color: var(--ca-text-secondary, #667085);
    background: transparent;
    border-color: transparent;
}

html[data-ca-theme="night"]
.loads-boolean-indicator-v1 {
    background: var(--ca-surface-raised);
    border-color: var(--ca-border);
}

html[data-ca-theme="night"]
.loads-boolean-indicator-v1--true {
    color: #07111f;
    background: var(--ca-success);
    border-color: var(--ca-success);
}

html[data-ca-theme="night"]
.loads-boolean-indicator-v1--null {
    color: var(--ca-text-secondary);
    background: transparent;
    border-color: transparent;
}