/* /mte/assets/css/xgrid-edit.css
   Refined inline editors matching Apple design principles
*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* Keep editor popovers above sticky headers/cells */
.select2-container {
    z-index: 9999 !important;
    width: 100% !important;
}

.select2-dropdown {
    z-index: 10000 !important;
    min-width: 160px;
    max-width: 320px;
    border-radius: 8px !important;
    border: 1px solid #d1d5db !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.flatpickr-calendar {
    z-index: 10001 !important;
}

/* -------- Refined Select2 styling -------- */
.select2-container .select2-selection--single {
    min-height: 36px;
    height: auto;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #ffffff;
    padding: 6px 12px;
    transition: all 0.15s ease;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 24px;
    color: var(--text);
    font-weight: 500;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 36px;
    right: 8px;
}

.select2-container--default.select2-container--focus .select2-selection--single {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(15, 58, 138, 0.1);
}

/* Refined dropdown options */
.select2-results__option {
    padding: 10px 12px;
    font-size: 14px;
    font-weight: 500;
    transition: background-color 0.1s ease;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--brand-primary);
    color: #ffffff;
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background: #f0f9ff;
    color: var(--brand-primary);
    font-weight: 600;
}

/* -------- Refined Flatpickr styling -------- */
.flatpickr-calendar {
    border: 1px solid #d1d5db;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    font-family: var(--font-sans);
}

.flatpickr-months,
.flatpickr-weekdays {
    background: #ffffff;
}

.flatpickr-day {
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.1s ease;
}

.flatpickr-day:hover {
    background: #f0f9ff;
    color: var(--brand-primary);
}

.flatpickr-day.today {
    border-color: var(--brand-primary);
    font-weight: 600;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #ffffff;
    font-weight: 600;
}

/* -------- Refined text editor (supplier) -------- */
.inline-supplier-editor {
    width: 100%;
    height: 36px;
    min-height: 36px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 8px 12px;
    font: inherit;
    font-weight: 500;
    background: #ffffff;
    color: var(--text);
    transition: all 0.15s ease;
}

.inline-supplier-editor:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(15, 58, 138, 0.1);
}

/* -------- Date editor anchor (unchanged) -------- */
.inline-date-editor.hidden-anchor {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    width: 100%;
    height: 100%;
}

/* Refined placeholder styling */
td[data-field="due_date"].placeholder {
    font-style: italic;
    color: #9ca3af;
    position: relative;
}

td[data-field="due_date"].placeholder::before {
    content: 'Set date…';
    color: #9ca3af;
    font-weight: 400;
}

/* Visual feedback while editing */
td[data-field].is-editing {
    background: #f8fafc;
    box-shadow: inset 0 0 0 2px rgba(15, 58, 138, 0.1);
}

/* Rest of the CSS remains the same for functionality... */
/* SLA styling, badge styling, responsive, etc. stay as-is */

/* SLA parity (unchanged for functionality) */
#orders-root tr.sla-breached td {
    background: #fef2f2 !important;
}

#orders-root tr.sla-breached td:first-child {
    border-left: 4px solid #ef4444 !important;
}

.badge {
    display: inline-block;
    padding: .15rem .4rem;
    border-radius: .3rem;
    color: #fff;
    font-size: .75rem;
    line-height: 1;
}

body.select2-open,
body.select2-container--open {
    overflow: auto !important;
}

#orders-root td[data-field="progress_status"] .select2-container .select2-selection--single {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.select2-results__options {
    max-height: min(50vh, 320px);
    overflow-y: auto;
}

#orders-root .select2-container {
    z-index: 10010 !important;
}

#orders-root .select2-dropdown {
    z-index: 10011 !important;
}

#orders-root .flatpickr-calendar {
    z-index: 10012 !important;
}

@media (max-width: 640px) {
    .select2-dropdown {
        min-width: 140px;
        max-width: 90vw;
    }
}


/* ==== ULTRA density editors ==== */
.xgrid-wrap.ultra #orders-root .select2-container .select2-selection--single {
  min-height: 26px;
  padding: 2px 6px;
}
.xgrid-wrap.ultra #orders-root
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 26px;
}

.xgrid-wrap.ultra #orders-root .select2-results__option {
  padding: 6px 8px;
  font-size: 12px;
}

.xgrid-wrap.ultra #orders-root .inline-supplier-editor {
  height: 26px;
  min-height: 26px;
  padding: 4px 6px;
  font-size: 12px;
}
/* was: td[data-field="due_date"].placeholder::before { ... } */
body[data-role-maintenance="1"] td[data-field="due_date"].placeholder::before { content: 'Set date…'; }
/* optional for supplier */
body[data-role-maintenance="1"] td[data-field="supplier"].placeholder::before { content: 'Set date…'; }

/* Part type column — support both keys just in case */
.xgrid thead th[data-col="type_part"],
.xgrid thead th[data-col="part_type"],
.xgrid td[data-field="type_part"],
.xgrid td[data-field="part_type"] {
  width: 72px;  /* adjust 64–96px to taste */
}

/* Ultra density */
.xgrid-wrap.ultra td[data-field="type_part"],
.xgrid-wrap.ultra td[data-field="part_type"] {
  width: 64px;
}

/*
  --- Editor Pop-out Fix (v4 - High Z-Index + Overflow) ---
*/

/* 1. Give the parent cell context */
.xgrid-wrap td:has(.inline-supplier-editor),
.xgrid-wrap td:has(.inline-respond-editor),
.xgrid-wrap td:has(.inline-status-part-editor),
.xgrid-wrap td:has(.select2-container) {
  position: relative;
  z-index: 10;
  
  /* THIS IS THE FIX: Allow the pop-out to draw outside the cell's bounds */
  overflow: visible !important;
}

/* 2. Define pop-out styles for all text/number/select inputs */
.xgrid-wrap .inline-supplier-editor,
.xgrid-wrap .inline-respond-editor,
.xgrid-wrap .inline-status-part-editor {
  /* Positioning */
  position: absolute;
  left: 2px;
  top: 0;
  z-index: 10010; /* High z-index */
  
  /* Sizing */
  min-width: 200px;
  width: auto !important; 
  height: 36px; /* Default height */
  padding: 8px 12px;
  box-sizing: border-box;

  /* Style */
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  border: 1px solid #2563EB !important; /* Force active border */
}

/* 3. Define pop-out styles for Select2 */
.xgrid-wrap td .select2-container {
  /* Positioning */
  position: absolute;
  left: 2px;
  top: 0;
  z-index: 10010; /* High z-index */

  /* Sizing */
  min-width: 200px;
  width: auto !important; 
  height: auto;

  /* Style */
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  border: 1px solid #2563EB;
  border-radius: 6px; 
}

/* 4. Override ULTRA density for pop-out text inputs */
.xgrid-wrap.ultra #orders-root .inline-supplier-editor,
.xgrid-wrap.ultra #orders-root .inline-respond-editor,
.xgrid-wrap.ultra #orders-root .inline-status-part-editor {
  height: 28px;
  min-height: 28px;
  padding: 4px 8px;
  font-size: 12px;
}

/* Add this to xgrid-edit.css */

/* Make the detail page kv boxes look like editable cells */
.od-kv.editable .v {
  cursor: pointer;
  font-weight: 500;
  border-radius: 4px; /* Optional: adds a nice hover area */
  padding: 2px 4px;   /* Optional: adds a nice hover area */
  margin: -2px -4px;  /* Optional: compensates for padding */
}
.od-kv.editable .v:hover {
  background: #f0f9ff;
  box-shadow: inset 0 0 0 1px #dbeafe;
}

/* Add placeholder text for empty editable fields (only for supervisor) */
body[data-role-supervisor="1"] .od-kv.editable[data-field="due_date"] .v:empty::before {
  content: 'Set date...';
  color: #9ca3af;
  font-weight: 400;
  font-style: italic;
}