/* ============================================================================
   MGIoT — Installations page (full redesign, self-contained on 2027 tokens)
   Scope: #viewInstallations.  Uses --r27-* vars from mgiot-redesign-2027.css.
   Loads AFTER redesign-2027 so it owns this page's look independent of legacy.
   ========================================================================== */

/* Clean page/list header (replaces the legacy mg-card-title-wrap + mg-strip) */
#viewInstallations .ix-head{
  display:flex; align-items:center; gap:14px;
  padding-bottom:16px; margin-bottom:2px; border-bottom:1px solid var(--r27-line);
}
#viewInstallations .ix-head-text{ display:flex; align-items:center; gap:11px; flex:1; min-width:0; }
#viewInstallations .ix-accent{
  width:4px; height:30px; border-radius:999px; flex-shrink:0;
  background:linear-gradient(180deg,var(--r27-accent),var(--r27-brand));
}
#viewInstallations .ix-title{ margin:0; font-size:16px; font-weight:800; letter-spacing:-.01em; color:var(--r27-ink); }
#viewInstallations .ix-sub{ margin:2px 0 0; font-size:12px; color:var(--r27-ink-faint); }
#viewInstallations .ix-head-actions{ margin-inline-start:auto; display:flex; gap:8px; }

#viewInstallations .ix-toolbar{
  display:flex; flex-wrap:wrap; gap:12px; margin-top:16px;
}
#viewInstallations .ix-toolbar .mg-search{ flex:1; min-width:220px; }

/* ── Grid ─────────────────────────────────────────────────────────────── */
#viewInstallations .ix-grid{
  display:grid; gap:16px; margin-top:18px;
  grid-template-columns:repeat(auto-fill, minmax(340px, 1fr));
}

/* ── Card ─────────────────────────────────────────────────────────────── */
#viewInstallations .ix-card{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; gap:14px;
  background:var(--r27-surface); border:1px solid var(--r27-line);
  border-radius:16px; box-shadow:var(--r27-sh); padding:18px 18px 16px;
  cursor:pointer;
  transition:transform var(--r27-ease), box-shadow var(--r27-ease), border-color var(--r27-ease);
}
#viewInstallations .ix-card:hover{
  transform:translateY(-3px); box-shadow:var(--r27-sh-md); border-color:#DCE6F3;
}
/* status accent on the leading edge */
#viewInstallations .ix-card::before{
  content:""; position:absolute; inset-inline-start:0; top:0; bottom:0; width:3px;
  background:#CBD5E1;
}
#viewInstallations .ix-card[data-status="pending"]::before{ background:var(--r27-amber); }
#viewInstallations .ix-card[data-status="approved"]::before{ background:var(--r27-green); }
#viewInstallations .ix-card[data-status="rejected"]::before{ background:var(--r27-red); }

/* ── Head ─────────────────────────────────────────────────────────────── */
#viewInstallations .ix-top{ display:flex; align-items:flex-start; gap:12px; }
#viewInstallations .ix-id{ flex:1; min-width:0; }
#viewInstallations .ix-customer{
  margin:0; font-size:16px; font-weight:800; letter-spacing:-.01em; color:var(--r27-ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#viewInstallations .ix-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px;
  margin-top:5px; font-size:12px; font-weight:600; color:var(--r27-ink-soft);
}
#viewInstallations .ix-dot{ color:var(--r27-ink-faint); }
#viewInstallations .ix-badges{ display:flex; gap:6px; flex-shrink:0; }
#viewInstallations .ix-badges .mg-badge{ border-radius:var(--r27-pill); font-weight:800; font-size:11px; padding:3px 10px; }

/* work-type chip */
#viewInstallations .ix-wt{
  font-size:11px; font-weight:800; padding:2px 9px; border-radius:var(--r27-pill);
}
#viewInstallations .ix-wt--new{ background:#EAF1FC; color:var(--r27-accent); }
#viewInstallations .ix-wt--maint{ background:var(--r27-amber-bg); color:var(--r27-amber); }
#viewInstallations .ix-wt--update{ background:var(--r27-cyan-bg); color:var(--r27-cyan); }
#viewInstallations .ix-wt--other{ background:var(--r27-violet-bg); color:var(--r27-violet); }

/* ── Details panel ────────────────────────────────────────────────────── */
#viewInstallations .ix-details{
  display:grid; gap:8px;
  background:var(--r27-surface-2); border:1px solid var(--r27-line);
  border-radius:12px; padding:13px 14px;
}
#viewInstallations .inst-detail{ display:flex; align-items:baseline; gap:8px; font-size:12.5px; }
#viewInstallations .inst-detail-label{
  font-weight:700; color:var(--r27-ink-faint); min-width:74px; flex-shrink:0;
}
#viewInstallations .inst-detail-val{ font-weight:600; color:var(--r27-ink-mid); }
#viewInstallations .inst-mono{ font-family:'Inter', ui-monospace, SFMono-Regular, Menlo, monospace; direction:ltr; }

/* ── Actions ──────────────────────────────────────────────────────────── */
#viewInstallations .ix-actions{
  display:flex; flex-wrap:wrap; gap:8px;
  padding-top:12px; border-top:1px solid var(--r27-line); margin-top:2px;
}
#viewInstallations .ix-btn{
  border:1px solid var(--r27-line-2); background:var(--r27-surface); color:var(--r27-ink-mid);
  border-radius:10px; font-weight:700; font-size:12.5px; padding:8px 12px; cursor:pointer;
  font-family:inherit;
  transition:background var(--r27-ease), border-color var(--r27-ease), transform var(--r27-ease);
}
#viewInstallations .ix-btn:hover{ background:var(--r27-surface-2); border-color:#D7DEE8; transform:translateY(-1px); }
#viewInstallations .ix-btn--approve{ background:var(--r27-green-bg); border-color:#BDE9CE; color:var(--r27-green); }
#viewInstallations .ix-btn--approve:hover{ background:#DCF3E6; }
#viewInstallations .ix-btn--reject,
#viewInstallations .ix-btn--danger{ background:var(--r27-red-bg); border-color:#F3C9C9; color:var(--r27-red); }
#viewInstallations .ix-btn--reject:hover,
#viewInstallations .ix-btn--danger:hover{ background:#FBDDDD; }
#viewInstallations .ix-btn--amber{ background:var(--r27-amber-bg); border-color:#F4DDB0; color:var(--r27-amber); }
#viewInstallations .ix-btn--info{ background:#EAF1FC; border-color:#CFE0F8; color:var(--r27-accent); }

/* ── Skeleton (loading) ───────────────────────────────────────────────── */
#viewInstallations .inst-skel-grid{ display:grid; gap:16px; margin-top:18px; grid-template-columns:repeat(auto-fill, minmax(340px,1fr)); }
#viewInstallations .inst-skel{
  background:var(--r27-surface); border:1px solid var(--r27-line); border-radius:16px; padding:18px;
  display:flex; flex-direction:column; gap:12px;
}
#viewInstallations .inst-skel-line{
  height:12px; border-radius:6px;
  background:linear-gradient(90deg,#EEF2F8 25%,#F6F8FB 37%,#EEF2F8 63%);
  background-size:400% 100%; animation:ixShimmer 1.3s ease infinite;
}
#viewInstallations .inst-skel-line.w-40{ width:40%; } #viewInstallations .inst-skel-line.w-60{ width:60%; }
#viewInstallations .inst-skel-line.w-80{ width:80%; } #viewInstallations .inst-skel-line.w-100{ width:100%; }
@keyframes ixShimmer{ 0%{background-position:100% 0} 100%{background-position:0 0} }

@media (prefers-reduced-motion: reduce){
  #viewInstallations .inst-skel-line{ animation:none; }
}