/*
  MandalaMine ERP — PHASE 1 (F): Empty / Loading / Error / Permission states
  File: mandalamine-phase1-states.css
  Scope: ADDITIVE. Every rule scoped to body.mmd-v2. Removing the <link>
         (and its .js) fully reverts — no markup/JS/DB/business-logic change.

  Pairs with mandalamine-phase1-states.js, which:
    - upgrades existing "⏳ Memuat…" placeholder rows into shimmer skeletons
    - upgrades existing "Belum ada data / Tidak ada data" rows into a clean
      empty-state (standard copy)
    - exposes window.MMState.{skeleton,empty,error,permission} helpers
  Tokens reused from phase1-ds.css / uiux-v2.css (--ds-*, --mmd2-*).
*/

/* ============================================================
   0. SHIMMER KEYFRAME (real loading skeleton)
   ============================================================ */
@keyframes mmSkelShimmer {
  0%   { background-position: -480px 0; }
  100% { background-position:  480px 0; }
}

body.mmd-v2 .mm-skel,
body.mmd-v2 .mm-skel-bar {
  display: block;
  border-radius: 8px;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,.04) 25%,
    rgba(201,154,46,.12) 37%,
    rgba(255,255,255,.04) 63%
  );
  background-size: 960px 100%;
  animation: mmSkelShimmer 1.25s ease-in-out infinite;
}
body.mmd-v2 .mm-skel-bar { height: 12px; margin: 7px 0; }
body.mmd-v2 .mm-skel-bar.w-40 { width: 40%; }
body.mmd-v2 .mm-skel-bar.w-60 { width: 60%; }
body.mmd-v2 .mm-skel-bar.w-80 { width: 80%; }

/* Loading placeholder ROW inside a real table — turn "⏳ Memuat…" into a
   set of shimmering bars instead of plain text. */
body.mmd-v2 td[colspan].mm-skel-cell {
  padding: 0 !important;
}
body.mmd-v2 td[colspan].mm-skel-cell .mm-skel-wrap {
  padding: 14px 16px;
  display: grid;
  gap: 6px;
}
body.mmd-v2 td[colspan].mm-skel-cell .mm-skel-bar:nth-child(1) { width: 86%; }
body.mmd-v2 td[colspan].mm-skel-cell .mm-skel-bar:nth-child(2) { width: 64%; }
body.mmd-v2 td[colspan].mm-skel-cell .mm-skel-bar:nth-child(3) { width: 74%; }

/* Skeleton for KPI cards / card bodies */
body.mmd-v2 .mm-skel-kpi {
  min-height: 64px;
  border-radius: var(--ds-r-sm, 12px);
}

/* ============================================================
   1. STANDARD STATE BLOCK  (empty / error / permission)
   Used by MMState helpers AND auto-applied to empty table rows.
   ============================================================ */
body.mmd-v2 .mm-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 28px 18px;
  text-align: center;
  color: #93a4b8;
}
body.mmd-v2 .mm-state .mm-state-ico {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 20px;
  border: 1px solid var(--ds-line, rgba(201,154,46,.16));
  background: rgba(255,255,255,.03);
}
body.mmd-v2 .mm-state .mm-state-title {
  color: #d7e0ee;
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: .01em;
}
body.mmd-v2 .mm-state .mm-state-msg { font-size: 12px; color: #8fa0b3; max-width: 360px; }
body.mmd-v2 .mm-state .mm-state-act {
  margin-top: 4px;
  border-radius: var(--ds-r-sm, 12px);
  padding: 7px 16px;
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--ds-line-soft, rgba(255,255,255,.07));
  color: #d7e0ee;
  transition: background .12s ease, border-color .12s ease;
}
body.mmd-v2 .mm-state .mm-state-act:hover {
  background: rgba(201,154,46,.14);
  border-color: var(--ds-accent, #C99A2E);
}

/* tone variants */
body.mmd-v2 .mm-state.is-error .mm-state-ico  { border-color: rgba(248,113,113,.4);  color: #f87171; }
body.mmd-v2 .mm-state.is-error .mm-state-title { color: #f7a8a8; }
body.mmd-v2 .mm-state.is-perm  .mm-state-ico  { border-color: rgba(245,177,74,.4);   color: #f5b14a; }
body.mmd-v2 .mm-state.is-perm  .mm-state-title { color: #f3c987; }

/* When a state block lives inside a placeholder table cell, drop the cell padding
   so the block centers cleanly. */
body.mmd-v2 td[colspan].mm-state-cell { padding: 6px !important; }
body.mmd-v2 td[colspan].mm-state-cell .mm-state { padding: 20px 14px; }

/* ============================================================
   2. RESPONSIVE — keep states tidy at 390px
   ============================================================ */
@media (max-width: 560px) {
  body.mmd-v2 .mm-state { padding: 22px 12px; }
  body.mmd-v2 .mm-state .mm-state-msg { font-size: 11.5px; }
}