/* /mte/assets/css/xgrid-repair-edit.css
   Refined inline editors for Repair grid (matches Apple-ish look)
   Mirrors xgrid-edit.css but generic to work in the repair table.
*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* Popovers above sticky headers */
.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,.15) !important;
}
.flatpickr-calendar {
  z-index: 10001 !important;
}

/* ---- Select2 (single) ---- */
.select2-container .select2-selection--single {
  min-height: 36px; height: auto;
  border: 1px solid #d1d5db; border-radius: 6px;
  background: #fff; padding: 6px 12px;
  transition: all .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,.1);
}

/* Dropdown options */
.select2-results__option {
  padding: 10px 12px; font-size: 14px; font-weight: 500;
  transition: background-color .1s ease;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--brand-primary); color: #fff;
}
.select2-container--default .select2-results__option[aria-selected=true] {
  background: #f0f9ff; color: var(--brand-primary); font-weight: 600;
}
.select2-results__options { max-height: min(50vh, 320px); overflow-y: auto; }

/* ---- Flatpickr ---- */
.flatpickr-calendar {
  border: 1px solid #d1d5db; border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0,0,0,.12); overflow: hidden;
  font-family: var(--font-sans);
}
.flatpickr-months,.flatpickr-weekdays { background: #fff; }
.flatpickr-day {
  border-radius: 6px; font-weight: 500; transition: all .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: #fff; font-weight: 600;
}

/* ---- Inline inputs (text/number) ---- */
.inline-text-editor,
.inline-number-editor {
  width: 100%; height: 36px; min-height: 36px;
  border: 1px solid #d1d5db; border-radius: 6px;
  padding: 8px 12px;
  font: inherit; font-weight: 500;
  background: #fff; color: var(--text);
  transition: all .15s ease;
}
.inline-text-editor:focus,
.inline-number-editor:focus {
  outline: none; border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(15,58,138,.1);
}

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

/* Make the invisible date anchor clickable and span the cell */
.inline-date-editor {
  position: absolute;
  inset: 0;
  opacity: 0.01;         /* keep tiny but clickable */
  pointer-events: auto;  /* must be clickable */
  width: 100%;
  height: 100%;
}


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

/* Placeholder hints for OUT/IN dates */
td[data-field="date_out"].placeholder,
td[data-field="date_in"].placeholder {
  font-style: italic; color: #9ca3af; position: relative;
}
body[data-role-maintenance="1"] td[data-field="date_out"].placeholder::before { content: 'Set date…'; color: #9ca3af; font-weight: 400; }
body[data-role-maintenance="1"] td[data-field="date_in"].placeholder::before  { content: 'Set date…'; color: #9ca3af; font-weight: 400; }

/* Keep page scroll usable while select2 is open */
body.select2-open,
body.select2-container--open { overflow: auto !important; }

/* Ensure editor stacks inside the grid context too */
.xgrid-wrap .select2-container { z-index: 10010 !important; }
.xgrid-wrap .select2-dropdown  { z-index: 10011 !important; }
.xgrid-wrap .flatpickr-calendar{ z-index: 10012 !important; }

/* ---- Ultra density (matches xgrid ULTRA mode) ---- */
.xgrid-wrap.ultra .select2-container .select2-selection--single {
  min-height: 26px; padding: 2px 6px;
}
.xgrid-wrap.ultra
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 26px;
}
.xgrid-wrap.ultra .select2-results__option {
  padding: 6px 8px; font-size: 12px;
}
.xgrid-wrap.ultra .inline-text-editor,
.xgrid-wrap.ultra .inline-number-editor {
  height: 26px; min-height: 26px; padding: 4px 6px; font-size: 12px;
}

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

/* Badge carry-over (safe default) */
.badge {
  display: inline-block; padding: .15rem .4rem; border-radius: .3rem;
  color: #fff; font-size: .75rem; line-height: 1;
}

/* Optional SLA parity if you reuse that concept */
.xgrid-wrap tr.sla-breached td { background: #fef2f2 !important; }
.xgrid-wrap tr.sla-breached td:first-child { border-left: 4px solid #ef4444 !important; }

/* Fallback styling for inline editors when class isn’t set */
td[data-field] > input[type="text"],
td[data-field] > input[type="number"],
td[data-field] > textarea {
  width: 100%;
  height: 36px;
  min-height: 36px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 8px 12px;
  font: inherit;
  font-weight: 500;
  background: #fff;
  color: var(--text);
  transition: all .15s ease;
}
td[data-field] > input[type="text"]:focus,
td[data-field] > input[type="number"]:focus,
td[data-field] > textarea:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(15,58,138,.1);
}

/* Ultra density */
.xgrid-wrap.ultra td[data-field] > input[type="text"],
.xgrid-wrap.ultra td[data-field] > input[type="number"],
.xgrid-wrap.ultra td[data-field] > textarea {
  height: 26px;
  min-height: 26px;
  padding: 4px 6px;
  font-size: 12px;
}