/* File: /mte/assets/css/xgrid-repair.css
   Purpose: Make Repair External grid look/feel IDENTICAL to xgrid (Apple-ish)
   Notes:
   - Column widths are controlled here (nth-child + [data-field="..."]), not inline.
   - Keep class names consistent with xgrid.css so the same tokens/themes apply.
*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ---------- Container ---------- */
.xgrid-wrap {
  height: 100vh;
  width: 100%;
  overflow: auto;
  position: relative;

  font: 14px/1.47 var(--font-sans);
  color: var(--text);
  background: var(--bg);

  --toolbar-h: 44px;
  --legend-h: 36px;    /* not used but reserved to mirror xgrid */
  --header-top: var(--toolbar-h);
}

.xgrid-wrap.compact {
  --toolbar-h: 40px;
  --legend-h: 32px;
  font-size: 13px;
}

/* ---------- Toolbar (match xgrid look) ---------- */
.xgrid-toolbar {
  position: sticky;
  top: 0;
  z-index: 1001;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  height: var(--toolbar-h);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}

.xgrid-toolbar-left,
.xgrid-toolbar-right {
  display: flex;
  gap: 8px;
  align-items: center;
}

.xgrid-toolbar input[type="search"] {
  width: 200px;
  height: 32px;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 16px;
  background: #f9fafb;
  font-size: 14px;
  transition: all 0.2s ease;
}
.xgrid-toolbar input[type="search"]:focus {
  outline: none;
  background: #ffffff;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(15, 58, 138, 0.1);
  width: 240px;
}

/* ---------- Table (identical structure/feel) ---------- */
table.xgrid {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}

.xgrid th,
.xgrid td {
  border-right: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
  padding: 10px 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  height: 48px;
  vertical-align: middle;
}

.xgrid th:first-child,
.xgrid td:first-child { border-left: none; }

.xgrid thead th {
  position: sticky;
  top: var(--header-top);
  z-index: 30;
  background: #f3f4f6;
  font-weight: 600;
  font-size: 13px;
  color: #374151;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  border-bottom: 2px solid #d1d5db;
}

/* Zebra + hover (match xgrid.css) */
.xgrid tbody tr:nth-child(even) td { background: #f9fafb; }
.xgrid tbody tr:nth-child(odd)  td { background: #ffffff; }
.xgrid tbody tr:hover td { background: #f0f9ff !important; }

/* ---------- Column sizing (like xgrid.css) ----------
   Order (15 cols):
   1  __no            2  in_wh         3  part_name      4  type_part
   5  maker           6  qty           7  cost_per_pcs   8  cost_total
   9  supplier       10  status       11  date_out      12  date_in
   13 price_new_parts 14 remarks       15 pic
----------------------------------------------------- */
.xgrid thead th:nth-child(1),  .xgrid td[data-field="__no"]            { width: 25px;  text-align: right; }
.xgrid thead th:nth-child(2),  .xgrid td[data-field="in_wh"]           { width: 40px; }
.xgrid thead th:nth-child(3),  .xgrid td[data-field="part_name"]       { width: 60px; }
.xgrid thead th:nth-child(4),  .xgrid td[data-field="type_part"]       { width: 60px; }
.xgrid thead th:nth-child(5),  .xgrid td[data-field="maker"]           { width: 60px; }
.xgrid thead th:nth-child(6),  .xgrid td[data-field="qty"]             { width: 30px;  text-align: right; font-variant-numeric: tabular-nums; }
.xgrid thead th:nth-child(7),  .xgrid td[data-field="cost_per_pcs"]    { width: 60px; text-align: right; font-variant-numeric: tabular-nums; }
.xgrid thead th:nth-child(8),  .xgrid td[data-field="cost_total"]      { width: 60px; text-align: right; font-variant-numeric: tabular-nums; }
.xgrid thead th:nth-child(9),  .xgrid td[data-field="supplier"]        { width: 70px; }
.xgrid thead th:nth-child(10), .xgrid td[data-field="status"]          { width: 100px; text-align: center; }
.xgrid thead th:nth-child(11), .xgrid td[data-field="date_out"]        { width: 50px; }
.xgrid thead th:nth-child(12), .xgrid td[data-field="date_in"]         { width: 50px; }
.xgrid thead th:nth-child(13), .xgrid td[data-field="price_new_parts"] { width: 80px; text-align: right; font-variant-numeric: tabular-nums; }
.xgrid thead th:nth-child(14), .xgrid td[data-field="remarks"]         { width: 120px; }
.xgrid thead th:nth-child(15), .xgrid td[data-field="pic"]             { width: 120px; }

/* Links (keep identical feel) */
a.link-detail {
  color: var(--brand-primary);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s ease;
}
a.link-detail:hover { color: #1e40af; text-decoration: underline; }

/* Badges for Status (same style) */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 6px;
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
}

/* Placeholder for dates when editable (maintenance role) */
td[data-field="date_out"].placeholder,
td[data-field="date_in"].placeholder {
  font-style: italic;
  color: #9ca3af;
}
body[data-role-maintenance="1"] td[data-field="date_out"].placeholder::before { content: 'Set date…'; }
body[data-role-maintenance="1"] td[data-field="date_in"].placeholder::before  { content: 'Set date…'; }

/* ---------- Virtual scroll spacer ---------- */
.x-spacer td {
  border: none !important;
  padding: 0 !important;
  height: var(--spacer-h, 0px) !important;
  background: transparent !important;
}

/* ---------- Footer info ---------- */
.xgrid-info {
  text-align: center;
  padding: 12px;
  color: var(--muted);
  font-size: 13px;
  background: #f9fafb;
  border-top: 1px solid var(--border);
}

/* ---------- Ultra density (match xgrid.ultra) ---------- */
.xgrid-wrap.ultra {
  --toolbar-h: 34px;
  --legend-h: 26px;
  font-size: 12px;
}
.xgrid-wrap.ultra .xgrid-toolbar {
  padding: 4px 8px;
  height: var(--toolbar-h);
}
.xgrid-wrap.ultra .xgrid-toolbar input[type="search"] {
  height: 26px;
  padding: 4px 8px;
  width: 150px;
}
.xgrid-wrap.ultra .xgrid-toolbar input[type="search"]:focus { width: 180px; }

.xgrid-wrap.ultra table.xgrid th,
.xgrid-wrap.ultra table.xgrid td {
  padding: 2px 4px;
  height: 28px;
  line-height: 1.2;
}
.xgrid-wrap.ultra .badge { padding: 1px 4px; font-size: 10px; border-radius: 4px; }

/* ---------- Responsive (mirror xgrid breakpoints) ---------- */
@media (max-width: 1200px) {
  .xgrid thead th:nth-child(3),  .xgrid td[data-field="part_name"] { width: 180px; }
  .xgrid thead th:nth-child(14), .xgrid td[data-field="remarks"]   { width: 200px; }
}

@media (max-width: 768px) {
  .xgrid-wrap { --toolbar-h: 40px; --legend-h: 32px; }
  .xgrid-toolbar { gap: 6px; padding: 6px 12px; }
  .xgrid-toolbar input[type="search"] { width: 160px; min-width: 120px; }
  .xgrid-toolbar input[type="search"]:focus { width: 180px; }

  .xgrid thead th:nth-child(5),  .xgrid td[data-field="maker"]     { width: 100px; }
  .xgrid thead th:nth-child(9),  .xgrid td[data-field="supplier"]  { width: 130px; }
  .xgrid thead th:nth-child(14), .xgrid td[data-field="remarks"]   { width: 160px; }
}

@media (max-width: 640px) {
  .xgrid-toolbar {
    flex-direction: column;
    height: auto;
    padding: 8px 12px;
    gap: 8px;
  }
  .xgrid-toolbar-left,
  .xgrid-toolbar-right { width: 100%; justify-content: space-between; }
  .xgrid-toolbar input[type="search"] { flex: 1; width: auto; border-radius: 8px; }
}

/* === Full-bleed layout for Repair XGrid === */
html, body { height: 100%; }

main.xgrid-full {
  padding: 0 !important;
  margin: 0 !important;
}

/* kill any site-wide container max-width/padding when inside xgrid-full */
main.xgrid-full .container,
main.xgrid-full .container-wide {
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
}

/* ensure the grid wrapper consumes the viewport height below the page header */
#repair-root.xgrid-wrap {
  /* If your header is sticky and ~56px tall, set this offset as needed */
  --top-offset: 0px;                /* tweak if your header is fixed */
  height: calc(100vh - var(--top-offset));
  width: 100%;
  margin: 0;
  border: 0;
  box-shadow: none;
  background: var(--bg);
}

/* remove card look if any leftover class slips in */
#repair-root.card,
#repair-root.card--flat {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
}

/* the info line spans full width under the table */
#repair-info.xgrid-info {
  border-top: 1px solid var(--border);
  margin: 0;
}

/* Filters pill button (same as xgrid) */
.xgrid-filters-btn {
  height: 32px;
  padding: 0 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #ffffff;
  color: #374151;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
}
.xgrid-filters-btn:hover { background: #f9fafb; border-color: #9ca3af; }
.xgrid-filters-btn.active { background: var(--brand-primary); color:#fff; border-color: var(--brand-primary); }
.xgrid-filters-btn::after { content:'▾'; font-size:10px; opacity:.7; }
.xgrid-filters-btn.active::after { content:'▴'; }

/* Dropdown + backdrop (same as xgrid) */
.xgrid-filters-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 1002;
  min-width: 220px;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  padding: 12px;
  display: none;
}
.xgrid-filters-dropdown.show { display: block; }
.xgrid-filters-dropdown label {
  display:block; font-size:12px; font-weight:600; color:#374151;
  margin-bottom:4px; text-transform:uppercase; letter-spacing:.025em;
}
.xgrid-filters-dropdown select {
  width:100%; height:32px; padding:6px 8px;
  border:1px solid #d1d5db; border-radius:6px; background:#fff;
  margin-bottom:12px; font-size:14px; transition:border-color .15s ease;
}
.xgrid-filters-dropdown select:focus {
  outline:none; border-color: var(--brand-primary);
}
.xgrid-filters-actions {
  display:flex; justify-content:flex-end; gap:8px; margin-top:8px;
}
.xgrid-filters-actions .btn {
  height:30px; padding:0 10px; border:1px solid #d1d5db; border-radius:6px;
  background:#fff; font-size:13px; font-weight:500; cursor:pointer;
}
.xgrid-filters-actions .btn.apply {
  background: var(--brand-primary); color:#fff; border-color: var(--brand-primary);
}
.xgrid-filters-dropdown-backdrop {
  position: fixed; inset: 0; z-index: 1000; display:none;
}
.xgrid-filters-dropdown-backdrop.show { display:block; }

/* Keep controls visible above zebra rows and weird ancestors */
.xgrid tbody { position: relative; z-index: 1; }

/* Make the create-controls row obviously present */
tr[data-new-controls] td {
  background: #eef2ff;
  position: relative;
}

/* If some global CSS collapses buttons, force them visible */
tr[data-new-controls] button { display: inline-flex; visibility: visible; }


/* Make the create-controls bar render above the sticky thead */
.xgrid thead th { z-index: 30; } /* already there in your skin, keep it */
.xgrid tbody tr[data-new-controls] td {
  position: relative;
  z-index: 31;          /* so it sits above the header if overlapping */
  background: #eef2ff;
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Safety: keep tbody content on its own stacking context */
.xgrid tbody { position: relative; }

/* If something still clips inline content, force it visible */
tr[data-new-controls] button { display: inline-flex; visibility: visible; }

/* Controls row layout */
tr[data-new-controls] td {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Push the second button (Cancel) to the far right */
tr[data-new-controls] td > button:nth-of-type(2) {
  margin-left: auto;
}
.xgrid tbody { position: relative; }
.xgrid tbody tr[data-new-controls] td { z-index: 31; background: #eef2ff; }

/* Sticky the inner bar, not the table cell */
.create-controls {
  position: sticky;
  top: var(--header-top);
  z-index: 31;
  background: #eef2ff;
  padding: 50px 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.create-controls > button:nth-of-type(2) { margin-left: auto; }