/* =====================================================================
   LAYOUT
   ===================================================================== */

/* signature dot-grid, konsisten sama Panel Admin -- identitas visual satu
   suite 25Dz POS */
body{
  background-image: radial-gradient(circle, var(--grid-dot) 1px, transparent 1px);
  background-size: 28px 28px;
  background-position: -14px -14px;
  background-attachment: fixed;
}

.wrap{ max-width: 1080px; margin: 0 auto; padding: var(--sp-4) var(--sp-4) 90px; }

.login-top{ display: flex; justify-content: flex-end; gap: var(--sp-2); max-width: 360px; margin: var(--sp-4) auto -6px; }

.topbar{
  display: flex; justify-content: space-between; align-items: center;
  margin: 0 0 var(--sp-4);
  position: sticky; top: 0; z-index: 5;
  background: var(--topbar-bg);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
}
.topbar h2{ margin: 0; font-size: 1.1em; }
.topbar .sub{ color: var(--muted); font-size: .8em; }
.topbar-actions{ display: flex; gap: var(--sp-2); }

/* stat grid: dipakai berkali-kali (dashboard, finance, laporan, shift) */
.cards{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  box-shadow: var(--shadow-card);
}
.card .label{ color: var(--muted); font-size: .78em; margin-bottom: 4px; }
.card .val{
  font-family: var(--font-mono); font-size: 1.3em; font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.section{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  margin-bottom: var(--sp-3);
  box-shadow: var(--shadow-card);
}
.section h3{
  margin: 0 0 var(--sp-3); font-size: 1em;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); flex-wrap: wrap;
}

.row{
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--sp-3) 0; border-bottom: 1px solid var(--line);
  font-size: .9em; gap: var(--sp-3);
}
.row:last-child{ border-bottom: none; }

.dot{ width: 7px; height: 7px; border-radius: 50%; background: var(--good); display: inline-block; margin-right: 6px; flex-shrink: 0; }

#dashView{ display: none; }