/* modules/base.css – Variablen, Layout, Topbar */
:root {
  --green: #1D9E75; --green-l: #E1F5EE; --green-d: #0F6E56;
  --amber: #BA7517; --amber-l: #FAEEDA;
  --red:   #A32D2D; --red-l:   #FCEBEB;
  --blue:  #185FA5; --blue-l:  #E6F1FB;
  --border: rgba(0,0,0,0.09);
  --bg:    #F4F3F0;
  --r:     10px; --rl: 14px;
}
/* Safe Area – Dynamic Island / Notch (iOS PWA) */
:root {
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
}
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--bg); color: #1a1a1a; font-size: 15px; line-height: 1.5; min-height: 100vh; }

/* Layout */
.app-shell { display: flex; flex-direction: column; min-height: 100vh; }
.topbar {
  background: #fff;
  border-bottom: 1px solid var(--border);
  height: calc(54px + var(--safe-top));
  padding-top: var(--safe-top);
  padding-left: calc(1.25rem + var(--safe-left));
  padding-right: calc(1.25rem + var(--safe-right));
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 50; gap: 12px;
}
.topbar .logo { font-size: 17px; font-weight: 600; text-decoration: none; color: #1a1a1a; display: flex; align-items: center; gap: 7px; }
.topbar nav { display: flex; gap: 4px; }
.nav-link { padding: 5px 11px; border-radius: 8px; font-size: 13px; font-weight: 500; text-decoration: none; color: #666; transition: all .12s; }
.nav-link:hover, .nav-link.active { background: var(--green-l); color: var(--green-d); }

.page { max-width: 720px; margin: 0 auto; padding: 1.5rem 1rem; }
.page.wide { max-width: 1060px; }

/* Cards */
.card { background: #fff; border-radius: var(--rl); border: 1px solid var(--border); padding: 1.25rem; margin-bottom: 1rem; }
.card-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: #999; margin-bottom: .875rem; }

/* Balance chip */
.balance-chip { display: inline-flex; align-items: center; gap: 5px; background: var(--green-l); color: var(--green-d); border-radius: 99px; padding: 4px 12px; font-size: 13px; font-weight: 600; }
.balance-chip.low { background: var(--red-l); color: var(--red); }

/* Status banner */
.status-banner { border-radius: var(--r); padding: .7rem 1rem; margin-bottom: 1rem; display: flex; align-items: center; justify-content: space-between; font-size: 14px; font-weight: 500; }
.status-banner.open      { background: var(--green-l); color: var(--green-d); }
.status-banner.ordered   { background: var(--amber-l); color: var(--amber); }
.status-banner.delivered { background: var(--blue-l);  color: var(--blue); }