/* Container Movement Form Styles */

/* Spin animation for loading indicator */
@keyframes spinAnimation {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.spin {
    animation: spinAnimation 1s linear infinite;
}

/* Movements grid (record grid) - compact grouped layout */
.movements-grid-compact {
    width: 100%;
}

.movements-grid-compact thead th {
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
}

.movements-grid-compact td {
    vertical-align: top;
    padding: 8px 6px;
}

.movements-grid-compact .serial-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    background: #f1f3f5;
    color: #495057;
    font-weight: 700;
    font-size: 0.75rem;
}

.movements-grid-compact .cell-stack {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.2;
}

.movements-grid-compact .cell-row {
    display: flex;
    gap: 4px;
    align-items: baseline;
}

.movements-grid-compact .label {
    color: #495057;
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.movements-grid-compact .value {
    color: #343a40;
    font-size: 0.875rem;
}

.movements-grid-compact .mono {
    font-family: Consolas, 'Courier New', monospace;
    letter-spacing: 0.2px;
}

.movements-grid-compact .mono.cntr {
    font-weight: 800;
}

.movements-grid-compact .muted {
    color: #6c757d;
    font-size: 0.8em;
}

.movements-grid-compact .cntr-lines {
    white-space: normal;
    overflow: visible;
}

.movements-grid-compact .cntr-line {
    white-space: nowrap;
    line-height: 1.15;
    text-align: left;
}

.movements-grid-compact .remarks {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Container emphasis */
.movements-grid-compact .cntr-badge {
    font-family: Consolas, 'Courier New', monospace;
    font-weight: 900;
}

.movements-grid-compact .cntr-size {
    font-family: Consolas, 'Courier New', monospace;
    font-weight: 900;
}

/* ===== Form adjustments to fix dropdown alignment and wrapping ===== */

/* Ensure consistent input/select heights and padding used in the form */
.d365-form-control,
.d365-form-control input,
.d365-form-control select,
input.d365-form-control,
textarea.d365-form-control,
.autocomplete-input {
    box-sizing: border-box;
    height: 36px;
    padding: 6px 10px;
    line-height: 1.2;
    border-radius: 4px;
}

/* Make datetime and date inputs visually consistent */
input[type="datetime-local"], input[type="date"] {
    height: 36px;
    padding: 6px 10px;
}

/* Remove native select arrow/icon completely */
.d365-form-control select,
.d365-form-control select::-ms-expand,
select.d365-form-control,
select.d365-form-control::-ms-expand {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background: transparent !important;
    background-image: none !important;
    border-radius: 4px;
    padding-right: 10px;
}

/* Make small auto-complete/select controls align with inputs */
.row .col-auto .d365-form-control,
.row .col-auto select,
.row .col-auto .autocomplete-input {
    min-width: 60px;
    display: inline-block;
    vertical-align: middle;
}

/* Flexible columns should expand but keep DO/CRO adjacent */
.row .col { min-width: 100px; }

/* DO/CRO wider column */
.docro-col { 
    min-width: 340px !important; 
    flex: 0 0 auto !important;
}
.docro-col input { width: 100%; }

/* Consignee/Shipper/C&F layout: All three fields on same row */
.form-row-consign { 
    display: flex !important; 
    gap: 8px !important; 
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
}

/* All three fields have equal flex */
.form-row-consign > .col-md-6,
.form-row-consign > .col-md-3,
.form-row-consign > .col-md-3.cnf { 
    flex: 1 1 0 !important;
    max-width: none !important;
    min-width: 200px !important;
}

/* AutoComplete item two-line template styling */
.autocomplete-item-two-line .primary { display:block; font-weight:600; }
.autocomplete-item-two-line .secondary { display:block; color:#6c757d; font-size:0.85rem; }

/* Fix for the small black dropdown square sometimes added by frameworks when control height mismatches */
.d365-form-control::-ms-expand { display: none; }

/* Keep RO Ref and Discount aligned to the right */
.status-right .status-item, .status-right .status-badge { align-items: center; }

/* Slightly tighter select appearance on toolbar elements */
.d365-editable-grid-container:not(.cmf-container-detail-grid) .d365-editable-grid-toolbar button,
.d365-editable-grid-container:not(.cmf-container-detail-grid) .d365-editable-grid-toolbar .separator { height:36px; }
/* Responsive tweaks: ensure the form rows don't stack excessively on wider screens */
@media (min-width: 992px) {
    .row .col-auto { flex: 0 0 auto; }
    .row .col { flex: 1 1 0; }
}

/* Highlight field styling - for important editable fields */
.highlight-field,
.highlight-field input,
.highlight-field .d365-form-control,
input.highlight-field {
    background-color: #fffde7 !important; /* Light yellow background */
    border-color: #fbc02d !important; /* Yellow border */
}

.highlight-field:focus,
.highlight-field input:focus,
input.highlight-field:focus {
    background-color: #fff9c4 !important; /* Slightly brighter on focus */
    border-color: #f9a825 !important;
    box-shadow: 0 0 0 2px rgba(251, 192, 45, 0.25) !important;
}

/* Make highlighted fields slightly larger/taller */
.highlight-field,
input.highlight-field,
.highlight-field input {
    min-height: 38px !important;
    font-size: 0.95rem !important;
}

/* End of container-movement form adjustments */

/* ===== Container Editable Grid - Font Size Adjustments ===== */

/* All grid text - decreased by 1px */
.d365-editable-grid-container .d365-grid {
    font-size: 12px !important;
}

.d365-editable-grid-container input,
.d365-editable-grid-container select,
.d365-editable-grid-container span {
    font-size: 12px !important;
}

.d365-editable-grid-container .d365-grid-cell {
    font-size: 12px !important;
}

/* Grid header - center align */
.d365-editable-grid-container:not(.cmf-container-detail-grid) .d365-input-grid th {
    text-align: center !important;
}

/* Container Number - monospace for readability */
.d365-editable-grid-container .container-no-input,
.d365-editable-grid-container .container-no {
    font-family: Consolas, 'Courier New', monospace !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

/* Status column - no color, no bold (like other columns) */
.d365-editable-grid-container .status-empty,
.d365-editable-grid-container .status-loaded {
    color: inherit !important;
    font-weight: normal !important;
}

/* ===== Condition Column Color Coding ===== */

/* Condition text - slightly smaller */
.d365-editable-grid-container .condition-sound,
.d365-editable-grid-container .condition-dirty,
.d365-editable-grid-container .condition-oily,
.d365-editable-grid-container .condition-dirty-oily,
.d365-editable-grid-container .condition-damage,
.d365-editable-grid-container .condition-damage-dirty {
    font-size: 11px !important;
}

/* Sound - Green */
.d365-editable-grid-container .condition-sound {
    color: #107c10 !important;
    font-weight: 500;
}

/* Dirty, Oily, Dirty and Oily Stain - Orange */
.d365-editable-grid-container .condition-dirty,
.d365-editable-grid-container .condition-oily,
.d365-editable-grid-container .condition-dirty-oily {
    color: #ca5010 !important;
    font-weight: 500;
}

/* Damage, Damage & Dirty - Red/Warning */
.d365-editable-grid-container .condition-damage,
.d365-editable-grid-container .condition-damage-dirty {
    color: #d13438 !important;
    font-weight: 500;
}

/* ===== EIR Remarks Column - Smaller font with truncation ===== */
.d365-editable-grid-container td:last-child .d365-grid-cell {
    font-size: 10px !important;
}

.d365-editable-grid-container td:last-child .d365-grid-cell span {
    font-size: 10px !important;
    display: block;
    max-width: 140px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.d365-editable-grid-container td:last-child .d365-grid-cell input {
    font-size: 10px !important;
}

/* Show full text on hover for EIR Remarks */
.d365-editable-grid-container td:last-child .d365-grid-cell span:hover {
    white-space: normal;
    overflow: visible;
    position: relative;
    z-index: 10;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    padding: 4px 6px;
    border-radius: 3px;
    max-width: 300px;
    word-wrap: break-word;
}

/* ===== Container Grid Inline Validation Errors ===== */

/* RESET - Remove any validation styling from d365-editable-grid.css */
.d365-editable-grid-container .d365-grid-cell.validation-error,
.d365-editable-grid-container .d365-grid-cell.validation-error input,
.d365-editable-grid-container .d365-grid-cell input.invalid {
    background-color: transparent !important;
    color: inherit !important;
}

/* Row-level error styling - light pink background */
.d365-editable-grid-container tr.has-error {
    background-color: #fff5f5 !important;
}

.d365-editable-grid-container tr.has-error td {
    background-color: #fff5f5 !important;
}

.d365-editable-grid-container tr.has-error:hover,
.d365-editable-grid-container tr.has-error:hover td {
    background-color: #ffecec !important;
}

/* Cell-level styling for error cells */
.d365-editable-grid-container .cell-error,
.d365-editable-grid-container .cell-warning {
    display: flex;
    align-items: center;
}

/* Input error/warning styling - red/yellow border */
.d365-editable-grid-container .input-error {
    border: 1px solid #d32f2f !important;
}

.d365-editable-grid-container .input-warning {
    border: 1px solid #f9a825 !important;
}

/* Error/warning icons */
.d365-editable-grid-container .error-icon {
    margin-left: 4px;
    flex-shrink: 0;
    cursor: help;
    color: #d32f2f;
    font-size: 14px;
}

.d365-editable-grid-container .warning-icon {
    margin-left: 4px;
    flex-shrink: 0;
    cursor: help;
    color: #f9a825;
    font-size: 14px;
}

/* Ensure inputs in error/warning cells flex properly */
.d365-editable-grid-container .cell-error input,
.d365-editable-grid-container .cell-warning input {
    flex: 1;
    min-width: 0;
}

/* Readonly display div styling (for non-focusable fields) */
.readonly-display {
    display: flex;
    align-items: center;
    min-height: 36px;
    background-color: #e9ecef !important;
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 6px 10px;
    color: #495057;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}