/* ==========================================================================
   Dashboard / home
   ========================================================================== */

.db-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-7);
}

.db-tile {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2);
  padding: var(--s-8) var(--s-9) var(--s-7);
  background: var(--bg-surface);
  border: 1px solid var(--br-1);
  border-radius: var(--r-10);
  box-shadow: var(--sh-xs);
  text-align: left;
  transition: box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.db-tile:hover { box-shadow: var(--sh-md); border-color: var(--br-2); transform: translateY(-1px); }
.db-tile:active { transform: none; }
.db-tile__ic {
  width: 32px; height: 32px; border-radius: var(--r-8);
  display: grid; place-content: center; margin-bottom: var(--s-4);
}
.db-tile__ic--accent { background: var(--a-50); color: var(--a-600); }
.db-tile__ic--warn { background: var(--warn-50); color: var(--warn-500); }
.db-tile__ic--err { background: var(--err-50); color: var(--err-500); }
.db-tile__ic--ok { background: var(--ok-50); color: var(--ok-500); }
.db-tile__val { font-size: var(--fs-28); font-weight: 660; line-height: 1.05; letter-spacing: -.03em; }
.db-tile__label { font-size: var(--fs-13); font-weight: 570; color: var(--tx-1); }
.db-tile__sub { font-size: var(--fs-11); color: var(--tx-3); }
.db-tile__go {
  position: absolute; top: var(--s-8); right: var(--s-8);
  color: var(--tx-4); opacity: 0; transform: translateX(-3px);
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.db-tile:hover .db-tile__go { opacity: 1; transform: none; }
.db-tile--urgent { border-color: var(--a-200); }

.db-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: var(--s-9); align-items: start; }

/* ------------------------------------------------------------------ rows */
.db-row {
  display: flex; align-items: center; gap: var(--s-7);
  padding: var(--s-7) var(--s-9);
  border-bottom: 1px solid var(--br-1);
  transition: background var(--dur-1) var(--ease);
}
.db-row:last-child { border-bottom: 0; }
.db-row:hover { background: var(--bg-hover); }
.db-row--tight { padding: var(--s-6) var(--s-9); }
.db-row__ic {
  width: 32px; height: 32px; border-radius: var(--r-8); flex: none;
  display: grid; place-content: center;
  background: #fff8e0; color: #9a6a05;
  border: 1px solid #f4e3ae;
}
:root[data-theme="dark"] .db-row__ic { background: #33280e; color: #e6bc55; border-color: #4a3a14; }
.db-row__body {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; gap: 3px;
  color: inherit; text-decoration: none;
}
.db-row__body:hover { text-decoration: none; }
.db-row__body:hover .db-row__title { color: var(--tx-accent); }
.db-row__title { font-size: var(--fs-13); font-weight: 580; letter-spacing: -.006em; }
.db-row__actions { display: flex; align-items: center; gap: var(--s-4); flex: none; }

/* --------------------------------------------------------------- quick -- */
.db-quick { display: flex; flex-direction: column; }
.db-quick__btn {
  display: flex; align-items: center; gap: var(--s-6);
  padding: var(--s-6) var(--s-9);
  border-bottom: 1px solid var(--br-1);
  text-align: left;
  transition: background var(--dur-1) var(--ease);
}
.db-quick__btn:last-child { border-bottom: 0; }
.db-quick__btn:hover { background: var(--bg-hover); }
.db-quick__ic {
  width: 30px; height: 30px; border-radius: var(--r-8); flex: none;
  display: grid; place-content: center;
  background: var(--bg-sunken); color: var(--tx-2);
  border: 1px solid var(--br-1);
  transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.db-quick__btn:hover .db-quick__ic { background: var(--a-50); color: var(--a-600); border-color: var(--a-100); }
.db-quick__label { font-size: var(--fs-13); font-weight: 560; }
.db-quick__text { font-size: var(--fs-11); color: var(--tx-3); }

/* ------------------------------------------------------------ activity -- */
.db-activity { display: flex; flex-direction: column; padding: var(--s-4) 0; }
.db-act {
  display: flex; align-items: flex-start; gap: var(--s-6);
  padding: var(--s-4) var(--s-9);
  color: inherit; text-decoration: none;
  transition: background var(--dur-1) var(--ease);
}
.db-act:hover { background: var(--bg-hover); text-decoration: none; }
.db-act__ic {
  width: 22px; height: 22px; border-radius: 50%; flex: none; margin-top: 1px;
  display: grid; place-content: center;
  background: var(--n-100); color: var(--tx-3);
}
.db-act__ic--ok { background: var(--ok-50); color: var(--ok-500); }
.db-act__ic--err { background: var(--err-50); color: var(--err-500); }
.db-act__ic--warn { background: var(--warn-50); color: var(--warn-500); }
.db-act__ic--info { background: var(--info-50); color: var(--info-500); }
.db-act__t { font-size: var(--fs-12); line-height: 1.45; color: var(--tx-2); }
.db-act__t b { font-weight: 620; color: var(--tx-1); }
.db-act__env { color: var(--tx-1); font-weight: 520; }
.db-act:hover .db-act__env { color: var(--tx-accent); }

/* --------------------------------------------------------- responsive -- */
@media (max-width: 1180px) {
  .db-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .db-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .db-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
  .db-tile { padding: var(--s-6) var(--s-7); border-radius: var(--r-8); }
  .db-tile__val { font-size: var(--fs-24); }
  .db-tile__ic { width: 26px; height: 26px; margin-bottom: var(--s-2); }
  .db-tile__go { display: none; }
  .db-row { flex-wrap: wrap; gap: var(--s-5); padding: var(--s-6) var(--s-7); }
  .db-row__ic { display: none; }
  .db-row__actions { width: 100%; justify-content: flex-end; }
  .db-quick__btn, .db-act { padding-inline: var(--s-7); }
}