/* Layout for screens that live inside a phone frame.
   Default body simulates a 412x892 device viewport (standard phone). */
html, body { height: 100%; }
body { background: var(--md-background); }

.screen {
  min-height: 100vh;
  display: flex; flex-direction: column;
  background: var(--md-surface);
  position: relative;
}
.screen-body {
  flex: 1;
  padding: 0 16px 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.screen.with-bottomnav .screen-body { padding-bottom: 100px; }

/* Hero greeting */
.greet {
  padding: 12px 4px 0;
  display: flex; align-items: center; gap: 16px;
}
.greet .text { flex: 1; }
.greet .hi { font: 400 14px/20px var(--font-body); color: var(--md-on-surface-variant); }
.greet .name { font: 600 28px/36px var(--font-display); color: var(--md-on-surface); letter-spacing: -.25px; margin-top: 2px; }
.greet .motiv { font: 400 14px/20px var(--font-body); color: var(--md-on-surface-variant); margin-top: 6px; }
.greet .motiv .gemini-text { font-weight: 500; }

.brand-logo {
  width: 56px; height: 56px;
  border-radius: 18px;
  background: linear-gradient(140deg, var(--gold-70) 0%, var(--gold-50) 60%, #8C5A00 100%);
  color: white;
  display: flex; align-items: center; justify-content: center;
  font: 700 28px/1 var(--font-display);
  box-shadow: var(--elev-2), inset 0 -3px 0 rgba(0,0,0,.18), inset 0 2px 0 rgba(255,255,255,.25);
  flex: 0 0 auto;
  letter-spacing: -.5px;
  position: relative;
}
.brand-logo::after {
  content: "";
  position: absolute; inset: 4px;
  border-radius: 14px;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.4), transparent 50%);
  pointer-events: none;
}

/* Stat blocks */
.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 16px;
}
.stat-card {
  background: var(--md-surface-container-low);
  border-radius: var(--shape-lg);
  padding: 16px;
  display: flex; flex-direction: column; gap: 4px;
  position: relative;
  overflow: hidden;
}
.stat-card .label { font: 500 12px/16px var(--font-body); color: var(--md-on-surface-variant); text-transform: uppercase; letter-spacing: .5px; }
.stat-card .value { font: 600 28px/36px var(--font-display); color: var(--md-on-surface); }
.stat-card .delta { font: 400 12px/16px var(--font-body); color: var(--md-on-surface-variant); display: flex; align-items: center; gap: 4px; }
.stat-card .delta.up { color: var(--status-ok); }
.stat-card .delta.down { color: var(--status-empty); }
.stat-card.tone-primary { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.stat-card.tone-primary .label { color: var(--md-on-primary-container); opacity: .8; }
.stat-card.tone-primary .value { color: var(--md-on-primary-container); }
.stat-card.tone-secondary { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.stat-card.tone-secondary .label { color: var(--md-on-secondary-container); opacity: .8; }
.stat-card.tone-secondary .value { color: var(--md-on-secondary-container); }
.stat-card.tone-tertiary { background: var(--md-tertiary-container); color: var(--md-on-tertiary-container); }
.stat-card.tone-tertiary .label { color: var(--md-on-tertiary-container); opacity: .8; }
.stat-card.tone-tertiary .value { color: var(--md-on-tertiary-container); }
.stat-card.tone-error { background: var(--md-error-container); color: var(--md-on-error-container); }
.stat-card.tone-error .label { color: var(--md-on-error-container); opacity: .8; }
.stat-card.tone-error .value { color: var(--md-on-error-container); }
.stat-card .corner-ico { position: absolute; right: 10px; top: 10px; width: 22px; height: 22px; opacity: .35; }

/* AI insight card */
.ai-card {
  position: relative;
  padding: 1.5px;
  border-radius: 22px;
  background: var(--gemini-gradient);
  background-size: 300% 300%;
  animation: gemini-flow 8s linear infinite;
}
.ai-card-inner {
  background: var(--md-surface-container-low);
  border-radius: 20.5px;
  padding: 16px;
}
.ai-card-inner .head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 8px;
}
.ai-card-inner .head .sparkle-ico {
  width: 32px; height: 32px; border-radius: 999px;
  background: var(--gemini-gradient);
  color: white;
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.ai-card-inner .head .title { font: 600 16px/22px var(--font-display); color: var(--md-on-surface); flex: 1; }
.ai-card-inner .body { font: 400 14px/22px var(--font-body); color: var(--md-on-surface-variant); }
.ai-card-inner .actions { display: flex; gap: 8px; margin-top: 12px; }

/* Quick action grid */
.qa-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.qa {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 14px 8px 10px;
  border-radius: 18px;
  background: var(--md-surface-container-low);
  transition: background var(--dur-2);
  text-align: center;
}
.qa:hover { background: var(--md-surface-container-high); }
.qa .icowrap {
  width: 44px; height: 44px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
}
.qa.primary .icowrap { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.qa.tertiary .icowrap { background: var(--md-tertiary-container); color: var(--md-on-tertiary-container); }
.qa.error .icowrap { background: var(--md-error-container); color: var(--md-on-error-container); }
.qa.gemini .icowrap { background: var(--gemini-gradient); color: white; }
.qa .label { font: 500 12px/16px var(--font-body); color: var(--md-on-surface); }

/* Chart area */
.chart-card {
  background: var(--md-surface-container-low);
  border-radius: 22px;
  padding: 16px 16px 8px;
}
.chart-card .h {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.chart-card .h .title { font: 500 16px/22px var(--font-display); }
.chart-card .h .sub { font: 400 12px/16px var(--font-body); color: var(--md-on-surface-variant); }

/* Item card (compact horizontal) */
.item-card {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-radius: 18px;
  background: var(--md-surface-container-low);
  transition: background var(--dur-2);
}
.item-card:hover { background: var(--md-surface-container); }
.item-card .ic {
  width: 48px; height: 48px;
  border-radius: 14px;
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.item-card .ic .status-dot {
  position: absolute; bottom: -2px; right: -2px;
  width: 14px; height: 14px;
  border-radius: 999px;
  border: 2px solid var(--md-surface-container-low);
}
.item-card .ic .status-dot.ok { background: var(--status-ok); }
.item-card .ic .status-dot.low { background: var(--status-low); }
.item-card .ic .status-dot.empty { background: var(--status-empty); }
.item-card .ic .status-dot.inactive { background: var(--status-inactive); }
.item-card .nm { font: 500 16px/22px var(--font-body); color: var(--md-on-surface); }
.item-card .br { font: 400 13px/18px var(--font-body); color: var(--md-on-surface-variant); display: flex; align-items: center; gap: 6px; }
.item-card .tr-qty { font: 600 16px/22px var(--font-display); color: var(--md-on-surface); text-align: right; }
.item-card .tr-sub { font: 400 12px/16px var(--font-body); color: var(--md-on-surface-variant); text-align: right; }

/* Section title (subtle) */
.sect {
  font: 500 14px/20px var(--font-body);
  color: var(--md-on-surface-variant);
  letter-spacing: .1px;
  margin: 20px 4px 8px;
  display: flex; align-items: center; justify-content: space-between;
}
.sect .a { color: var(--md-primary); font: 500 13px/20px var(--font-body); }

/* Bottom safe area */
.safe-bottom { height: env(safe-area-inset-bottom, 0); }