/* ===== WIP View (tiles, table, toolbar) ===== */

.wip-root {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  
  .wip-toolbar {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
  }
  
  .wip-toolbar label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
  }
  
  #wip-search {
    min-width: 260px;
    padding: 8px 10px;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    outline: none;
    background: var(--card);
  }
  #wip-search:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102,126,234,0.15);
  }
  
  /* Tiles */
  .wip-tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(160px, 1fr));
    gap: 14px;
  }
  .wip-tiles .tile {
    background: var(--card);
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 14px;
    box-shadow: 0 1px 2px rgba(16,24,40,0.04);
  }
  .wip-tiles .label {
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 6px;
    letter-spacing: .2px;
    text-transform: none;
  }
  .wip-tiles .value {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
  }
  
  /* Delta badge */
  .wip-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    border: 1px solid #e5e7eb;
    background: #f9f7f4;
    color: #111827;
  }
  .wip-badge.ok  { background:#ecfdf5; color:#065f46; border-color:#a7f3d0; }
  .wip-badge.pos { background:#eff6ff; color:#1e40af; border-color:#bfdbfe; }
  .wip-badge.neg { background:#fef2f2; color:#991b1b; border-color:#fecaca; }
  
  /* Loading & error */
  #wip-loading { color:#6b7280; font-size:13px; padding-left:2px; }
  #wip-error {
    color:#991b1b; background:#fef2f2; border:1px solid #fecaca;
    border-radius:8px; padding:8px 10px;
  }
  
  /* Table */
  .wip-tablewrap {
    overflow:auto;
    border:1px solid #e5e7eb;
    border-radius:10px;
    background:var(--card);
  }
  .wip-table {
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    min-width:840px;
  }
  .wip-table th, .wip-table td {
    padding:10px 12px;
    border-bottom:1px solid #eef2f7;
    white-space:nowrap;
  }
  .wip-table thead th {
    position:sticky; top:0; background:#f9f7f4;
    font-size:12px; color:#4b5563; text-align:left;
    border-bottom:1px solid #e5e7eb;
    user-select:none; cursor:pointer;
    z-index: 0; /* keep below modals */
  }
  .wip-table thead th.right { text-align:right; }
  .wip-table tbody tr { cursor:pointer; }
  .wip-table tbody tr:hover { background:#faf8f3; }
  .wip-table td.right { text-align:right; }
  .wip-table td.strong { font-weight:700; }
  
  .muted { color:#6b7280; font-style:italic; text-align:center; }
  .error { color:#991b1b; }
  
  /* Sort indicators */
  th.sort-asc::after, th.sort-desc::after {
    content:''; display:inline-block; width:0; height:0;
    border-left:5px solid transparent; border-right:5px solid transparent; margin-left:6px;
  }
  th.sort-asc::after  { border-bottom:6px solid #374151; } /* up */
  th.sort-desc::after { border-top:6px solid #374151; }    /* down */
  
  /* Spinner used inside the Compare button */
  .btn.primary .spinner {
    width: 14px; height: 14px;
    border: 2px solid rgba(255,255,255,0.5);
    border-top-color: #fff;
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px;
    animation: wipspin 0.9s linear infinite;
    vertical-align: -2px;
  }
  @keyframes wipspin {
    to { transform: rotate(360deg); }
  }
  
  /* ===== Modal for Production Order drill-down ===== */
  
  .wip-modal-host { position:fixed; inset:0; z-index:5000; }
  .wip-modal-backdrop { position:absolute; inset:0; background:rgba(17,24,39,0.5); backdrop-filter:blur(2px); }
  .wip-modal {
    position:absolute; inset:50% auto auto 50%; transform:translate(-50%, -50%);
    width:min(980px, 92vw); max-height:85vh; display:flex; flex-direction:column;
    background:var(--card); border-radius:14px; border:1px solid #e5e7eb; box-shadow:0 20px 40px rgba(0,0,0,0.18); overflow:hidden;
  }
  .wip-modal-header {
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:14px 16px; border-bottom:1px solid #e5e7eb; background:#f9f7f4;
  }
  .wip-modal-header .title { font-weight:800; font-size:16px; color:#111827; }
  .wip-modal-header .sub { font-size:12px; color:#6b7280; margin-top:2px; }
  .wip-close {
    border:none; background:var(--card); border-radius:8px; width:32px; height:32px;
    font-size:18px; line-height:1; cursor:pointer; border:1px solid #e5e7eb;
  }
  .wip-close:hover { background:#f3f4f6; }
  .wip-modal-body { padding:14px 16px 16px; overflow:auto; }
  
  /* Info grid */
  .wip-modal-body .grid {
    display:grid; grid-template-columns:repeat(5, minmax(120px,1fr));
    gap:12px; margin-bottom:12px;
  }
  .wip-modal-body .grid > div {
    background:var(--card); border:1px solid #eef2f7; border-radius:10px; padding:10px;
  }
  .wip-modal-body .grid strong {
    display:block; font-size:11px; color:#6b7280; margin-bottom:4px;
  }
  
  /* Nested table */
  .wip-modal-body .tablewrap {
    overflow:auto; border:1px solid #e5e7eb; border-radius:10px; background:var(--card);
  }
  .wip-modal-body .wip-table thead th { background:#f3f4f6; z-index: 0; }

  /* Δ Breakdown modal */
.wip-delta-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
  }
  
  .wip-delta-modal {
    background: var(--card);
    color: #222;
    border-radius: 12px;
    padding: 20px;
    width: 800px;
    max-height: 80vh;
    overflow: auto;
    box-shadow: 0 4px 24px rgba(0,0,0,0.3);
    animation: fadeIn 0.2s ease-out;
  }
  
  .wip-delta-modal .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
  }
  
  .wip-delta-modal .header h2 {
    margin: 0;
    font-size: 1.2rem;
  }
  
  .wip-delta-modal .close-btn {
    border: none;
    background: none;
    font-size: 1.2rem;
    cursor: pointer;
  }
  
  .wip-delta-modal .summary {
    display: flex;
    gap: 2rem;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 10px;
  }
  
  .wip-delta-modal .sections details {
    margin-bottom: 10px;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 8px 10px;
  }
  
  .wip-delta-modal .sections summary {
    cursor: pointer;
  }
  
  .mini-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 5px;
  }
  .mini-table th, .mini-table td {
    border-bottom: 1px solid #eee;
    padding: 4px 6px;
    text-align: left;
  }
  .mini-table td.num {
    text-align: right;
  }
  
  /* --- Modal sizing and layout --- */
.modal__wide {
    width: min(1100px, 96vw);
    max-height: 88vh;
    overflow: auto;
  }
  
  /* Compact stat chips used in headers */
  .stats {
    gap: 12px;
  }
  .stats .big {
    font-size: 1.15rem;
    font-weight: 700;
  }
  .stats .muted.small { opacity: .8 }
  
  /* Δ breakdown sections */
  .delta-sec {
    border: 1px solid var(--border, #e3e6ea);
    border-radius: 10px;
    margin: 10px 0;
    background: var(--card);
  }
  .delta-sec > summary {
    display: flex;
    align-items: baseline;
    gap: 8px;
    cursor: pointer;
    padding: 10px 12px;
    list-style: none;
  }
  .delta-sec > summary::-webkit-details-marker { display: none; }
  .delta-sec__title { font-weight: 600; }
  .delta-sec__amt { color: #6b7280; }
  .delta-sec__body { padding: 10px 12px 14px; }
  
  /* Small table + right aligned numeric cells */
  .table.small th, .table.small td { padding: 6px 8px; }
  .table .right { text-align: right; }
  
  /* Order drilldown: keep header sticky for long lists */
  .modal__card.modal__wide .table thead th {
    position: sticky;
    top: 0;
    background: var(--card);
    z-index: 1;
    box-shadow: 0 1px 0 rgba(0,0,0,.05);
  }
  /* sortable headers */
.table.sortable th {
  cursor: pointer;
  user-select: none;
  position: relative;
  white-space: nowrap;
}
.table.sortable th.sort-asc::after,
.table.sortable th.sort-desc::after {
  content: '';
  border: 4px solid transparent;
  border-top-color: currentColor;
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
}
.table.sortable th.sort-desc::after {
  transform: translateY(-50%) rotate(180deg);
}