/* =========================================================
   THE DINKIN PROJECT — POLISH LAYER
   Entrance motion, refined alerts, sticky headers, loading states.
   Depends on tokens.css. Respects prefers-reduced-motion (see tokens.css).
   ========================================================= */

/* ---- Page/card entrance ---- */
.card{
  animation: dnk-rise .45s ease both;
}

@keyframes dnk-rise{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}

/* ---- Table row stagger (first screenful only, keeps it snappy) ---- */
tbody tr{
  animation: dnk-fade .35s ease both;
}
tbody tr:nth-child(1){ animation-delay:.02s; }
tbody tr:nth-child(2){ animation-delay:.05s; }
tbody tr:nth-child(3){ animation-delay:.08s; }
tbody tr:nth-child(4){ animation-delay:.11s; }
tbody tr:nth-child(5){ animation-delay:.14s; }
tbody tr:nth-child(6){ animation-delay:.17s; }
tbody tr:nth-child(7){ animation-delay:.2s; }
tbody tr:nth-child(8){ animation-delay:.23s; }

@keyframes dnk-fade{
  from{ opacity:0; }
  to{ opacity:1; }
}

.table-hover tbody tr{ transition:background-color .15s ease, transform .15s ease; }
.table-hover tbody tr:hover{ transform:scale(1.002); }

/* ---- Sticky table headers on scrollable panels ---- */
.table-responsive thead th{
  position:sticky;
  top:0;
  background:var(--surface);
  z-index:2;
}

/* ---- Refined alerts: icon rail + left accent bar instead of flat Bootstrap blocks ---- */
.alert{
  border:none;
  border-left:4px solid transparent;
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-sm);
  font-weight:500;
  animation: dnk-rise .35s ease both;
}

.alert-success{ background:#EDF4E9; color:var(--primary-dk); border-left-color:var(--success); }
.alert-danger{ background:#FBEEED; color:#7A2A26; border-left-color:var(--danger); }
.alert-warning{ background:#FDF3E0; color:#7A5A12; border-left-color:#C79A16; }
.alert-info{ background:#EAF3F4; color:#123842; border-left-color:var(--teal); }

/* ---- Sidebar active state: accent bar instead of flat fill ---- */
.sidebar a{ position:relative; overflow:hidden; }

.sidebar a.active{
  background:var(--gold);
  color:#fff;
}

.sidebar a.active::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:4px;
  background:var(--ink);
  opacity:.15;
}

/* ---- Buttons: press feedback + loading state ---- */
.btn{ transition: transform .12s ease, box-shadow .12s ease, background-color .15s ease; }
.btn:active{ transform:scale(.97); }

.btn.is-loading{
  pointer-events:none;
  opacity:.75;
  position:relative;
  color:transparent !important;
}

.btn.is-loading::after{
  content:"";
  position:absolute;
  width:16px; height:16px;
  top:50%; left:50%;
  margin:-8px 0 0 -8px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.5);
  border-top-color:#fff;
  animation: dnk-spin .6s linear infinite;
}

.btn-outline-success.is-loading::after,
.btn-outline-dark.is-loading::after{
  border:2px solid rgba(23,35,63,.35);
  border-top-color:var(--primary);
}

@keyframes dnk-spin{ to{ transform:rotate(360deg); } }

/* ---- Metric card number readouts get a subtle count-up-friendly baseline ---- */
.metric-card strong{ display:inline-block; }

/* ---- Avatar chip (topbar) polish ---- */
.avatar-chip{
  display:flex;
  align-items:center;
  gap:10px;
}

.avatar-chip .avatar{
  width:38px;
  height:38px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--primary), var(--primary-dk));
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-family:var(--font-display);
  box-shadow:var(--shadow-sm);
}

/* ---- Modal entrance, slightly springier than Bootstrap default ---- */
.modal.fade .modal-dialog{
  transform:translateY(16px) scale(.98);
  transition: transform .25s cubic-bezier(.34,1.3,.64,1), opacity .2s ease;
}
.modal.show .modal-dialog{ transform:translateY(0) scale(1); }

@media (prefers-reduced-motion: reduce){
  .card, tbody tr, .alert, .modal.fade .modal-dialog{ animation:none !important; transition:none !important; }
}