/* ─── Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --navy:        #25245d;
  --navy-dark:   #1a1940;
  --navy-mid:    #2f2d70;
  --navy-light:  rgba(37,36,93,.06);
  --navy-border: rgba(37,36,93,.12);
  --gold:        #ffcc00;
  --gold-dark:   #d7b44c;
  --gold-bg:     rgba(255,204,0,.12);
  --gold-border: rgba(255,204,0,.35);
  --white:       #ffffff;
  --text:        #25245d;
  --text-light:  rgba(37,36,93,.72);
  --text-inv:    #ffffff;
  --text-inv-sub: rgba(255,255,255,.82);
  --red:         #d94f4f;
  --amber:       #e8a020;
  --green-ok:    #2e7d52;
  --radius:      16px;
  --radius-pill: 999px;
  --header-h:    64px;
  --nav-h:       64px;
  --shadow-card: 0 10px 26px rgba(0,0,0,.10);
  --shadow-btn:  0 10px 24px rgba(0,0,0,.18);
}

html, body {
  height: 100%;
  background: var(--navy);
  color: var(--text);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  overscroll-behavior: none;
}

/* ─── Header ───────────────────────────────────────────────── */
.app-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  background: var(--navy);
  border-bottom: 2px solid var(--gold-border);
  z-index: 100;
  padding-top: env(safe-area-inset-top);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  padding: 0 16px;
}
.header-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.header-icon { font-size: 26px; }
.header-title h1 {
  color: var(--gold);
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 0.3px;
}
.header-sub {
  color: var(--text-inv-sub);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-top: 1px;
}
.header-time {
  color: var(--text-inv-sub);
  font-size: 12px;
  font-weight: 700;
  text-align: right;
  background: var(--gold-bg);
  border: 1px solid var(--gold-border);
  border-radius: var(--radius-pill);
  padding: 4px 10px;
}

/* ─── Tab Navigation ───────────────────────────────────────── */
.tab-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: var(--nav-h);
  background: var(--navy);
  border-top: 2px solid var(--gold-border);
  display: flex;
  z-index: 100;
  padding-bottom: env(safe-area-inset-bottom);
}
.tab-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: none;
  border: none;
  color: var(--text-inv-sub);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  cursor: pointer;
  transition: color 0.2s;
  padding: 6px 0;
}
.tab-btn .tab-icon { font-size: 20px; }
.tab-btn.active { color: var(--gold); }
.tab-btn.active .tab-icon { transform: scale(1.1); }

/* ─── Main Content Area ────────────────────────────────────── */
.app-main {
  margin-top: var(--header-h);
  padding: 16px 16px 48px;
  min-height: calc(100vh - var(--header-h) - var(--nav-h));
  /* Extra bottom padding so last card clears the fixed nav bar */
  padding-bottom: calc(var(--nav-h) + 32px);
  background: var(--navy);
}

/* ─── Tab Sections ─────────────────────────────────────────── */
.tab-content { display: none; }
.tab-content.active { display: block; }

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.section-header h2 {
  color: var(--gold);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .3px;
}
.section-hint {
  color: var(--text-inv-sub);
  font-size: 13px;
  margin-bottom: 16px;
}

/* ─── Refresh Button ───────────────────────────────────────── */
.btn-refresh {
  background: var(--gold-bg);
  border: 1px solid var(--gold-border);
  color: var(--gold);
  border-radius: 50%;
  width: 34px; height: 34px;
  font-size: 18px;
  cursor: pointer;
  transition: background 0.2s;
  display: flex; align-items: center; justify-content: center;
}
.btn-refresh:active { background: rgba(255,204,0,.22); }
.btn-refresh.spinning { animation: spin 0.6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── Beer Cards ───────────────────────────────────────────── */
.beer-list { display: flex; flex-direction: column; gap: 12px; }

.beer-card {
  background: var(--white);
  border: 1px solid var(--navy-border);
  border-radius: var(--radius);
  padding: 16px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.beer-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 5px;
  border-radius: var(--radius) 0 0 var(--radius);
}
.beer-card.status-green::before  { background: var(--green-ok); }
.beer-card.status-amber::before  { background: var(--amber); }
.beer-card.status-red::before    { background: var(--red); }

.beer-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.beer-name {
  font-size: 16px;
  font-weight: 900;
  color: var(--navy);
}
.status-badge {
  font-size: 22px;
  line-height: 1;
}

.beer-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.stat-block {
  text-align: center;
  background: var(--navy-light);
  border: 1px solid var(--navy-border);
  border-radius: 10px;
  padding: 8px 4px;
}
.stat-value {
  font-size: 22px;
  font-weight: 900;
  color: var(--navy);
  line-height: 1.1;
}
.stat-value.urgent  { color: var(--red); }
.stat-value.warning { color: var(--amber); }
.stat-label {
  font-size: 10px;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 700;
  margin-top: 3px;
}

.beer-order-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--navy-border);
}
.order-qty {
  font-size: 14px;
  font-weight: 900;
}
.order-qty.needs-order { color: var(--navy); }
.order-qty.no-order    { color: var(--text-light); }
.confidence-tag {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-weight: 800;
  background: var(--navy-light);
  border: 1px solid var(--navy-border);
  color: var(--text-light);
}
.confidence-tag.High   { background: rgba(46,125,82,.10); border-color: rgba(46,125,82,.25); color: var(--green-ok); }
.confidence-tag.Medium { background: rgba(232,160,32,.10); border-color: rgba(232,160,32,.28); color: var(--amber); }
.confidence-tag.Low    { background: rgba(217,79,79,.10);  border-color: rgba(217,79,79,.25);  color: var(--red); }

/* ─── Order Window Info ────────────────────────────────────── */
.order-window-info {
  background: var(--gold-bg);
  border: 1px solid var(--gold-border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--text-inv-sub);
}
.order-window-info strong {
  color: var(--gold);
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 900;
}

/* ─── Deadline Banner ──────────────────────────────────────── */
.order-deadline-banner {
  background: var(--gold);
  color: var(--navy);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 900;
  text-align: center;
  box-shadow: var(--shadow-btn);
}

/* ─── High-demand event card ───────────────────────────────── */
.event-highlight-card {
  background: var(--navy-mid);
  border: 1px solid var(--gold-border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-card);
}
.event-highlight-card .event-title {
  color: var(--gold);
  font-weight: 900;
  font-size: 13px;
  margin-bottom: 8px;
}
.event-highlight-card .event-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--text-inv-sub);
}
.event-highlight-card .event-note {
  font-size: 11px;
  color: rgba(255,255,255,.45);
  margin-top: 8px;
}

/* ─── Action Buttons ───────────────────────────────────────── */
.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}
.btn-primary, .btn-secondary {
  width: 100%;
  padding: 14px;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
  transition: filter 0.15s, opacity 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn-primary {
  background: var(--gold);
  color: var(--navy);
  box-shadow: var(--shadow-btn);
}
.btn-secondary {
  background: transparent;
  border-color: rgba(255,255,255,.28);
  color: var(--white);
  box-shadow: none;
}
.btn-primary:hover  { filter: brightness(.95); }
.btn-secondary:hover { background: rgba(255,255,255,.08); }
.btn-primary:active, .btn-secondary:active { opacity: 0.85; }
.btn-primary:disabled, .btn-secondary:disabled { opacity: 0.5; cursor: not-allowed; }

/* ─── Update Stock Form ────────────────────────────────────── */
.update-list { display: flex; flex-direction: column; gap: 10px; }

.update-row {
  background: var(--white);
  border: 1px solid var(--navy-border);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--shadow-card);
}
.update-beer-name {
  font-size: 15px;
  font-weight: 900;
  color: var(--navy);
}
.update-current {
  color: var(--text-light);
  font-size: 12px;
  font-weight: 700;
  margin-top: 2px;
}
.keg-input-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}
.keg-btn {
  width: 36px; height: 36px;
  background: var(--navy);
  border: none;
  border-radius: 50%;
  color: var(--gold);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
.keg-btn:active { opacity: 0.8; }
.keg-input {
  width: 52px;
  text-align: center;
  background: var(--navy-light);
  border: 1px solid var(--navy-border);
  border-radius: 10px;
  color: var(--navy);
  font-size: 18px;
  font-weight: 900;
  padding: 6px 0;
}
.keg-input:focus { outline: none; border-color: var(--navy); }

/* ─── Alert History ────────────────────────────────────────── */
.alert-list { display: flex; flex-direction: column; gap: 10px; }

.alert-item {
  background: var(--white);
  border: 1px solid var(--navy-border);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow-card);
}
.alert-subject {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 8px;
  line-height: 1.4;
}
.alert-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--text-light);
  font-weight: 700;
}
.alert-type-badge {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-weight: 800;
}
.alert-type-badge.weekly_order {
  background: var(--gold-bg);
  border: 1px solid var(--gold-border);
  color: #a07800;
}
.alert-type-badge.low_stock {
  background: rgba(217,79,79,.10);
  border: 1px solid rgba(217,79,79,.25);
  color: var(--red);
}
.alert-type-badge.event_spike {
  background: rgba(232,160,32,.10);
  border: 1px solid rgba(232,160,32,.28);
  color: var(--amber);
}

/* ─── Feedback / Toast ─────────────────────────────────────── */
.feedback-msg {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}
.feedback-msg.success {
  background: rgba(46,125,82,.12);
  border: 1px solid rgba(46,125,82,.25);
  color: var(--green-ok);
}
.feedback-msg.error {
  background: rgba(217,79,79,.10);
  border: 1px solid rgba(217,79,79,.25);
  color: var(--red);
}

.toast {
  position: fixed;
  bottom: calc(var(--nav-h) + 12px);
  left: 16px; right: 16px;
  background: var(--navy-mid);
  border: 1px solid var(--gold-border);
  color: var(--white);
  padding: 14px 16px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  z-index: 200;
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
  animation: slideUp 0.25s ease;
}
@keyframes slideUp {
  from { transform: translateY(16px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ─── Loading & Empty States ───────────────────────────────── */
.loading {
  color: var(--text-inv-sub);
  text-align: center;
  padding: 40px 0;
  font-size: 14px;
  font-weight: 700;
}
.empty-state {
  color: var(--text-inv-sub);
  text-align: center;
  padding: 40px 0;
  font-size: 14px;
  font-weight: 700;
}

/* ─── Days remaining colours ───────────────────────────────── */
.days-ok      { color: var(--green-ok); }
.days-warning { color: var(--amber); }
.days-urgent  { color: var(--red); }

/* ─── Stats Tab ────────────────────────────────────────────── */
/* ─── Sync Sales Button ────────────────────────────────────── */
.btn-sync-sales {
  background: var(--gold-bg);
  border: 1px solid var(--gold-border);
  color: var(--gold);
  border-radius: var(--radius-pill);
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.2s;
}
.btn-sync-sales:active { background: rgba(255,204,0,.22); }
.btn-sync-sales:disabled { opacity: 0.5; cursor: not-allowed; }

.period-selector {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
.period-btn {
  flex: 1;
  padding: 9px 0;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,.20);
  background: transparent;
  color: var(--text-inv-sub);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.period-btn.active {
  background: var(--gold);
  color: var(--navy);
  border-color: var(--gold);
}
.period-btn:not(.active):active { background: rgba(255,255,255,.08); }

.stats-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
.stat-card {
  background: var(--white);
  border: 1px solid var(--navy-border);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow-card);
  text-align: center;
}
.stat-card-value {
  font-size: 26px;
  font-weight: 900;
  color: var(--navy);
  line-height: 1.1;
}
.stat-card-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-top: 4px;
}
.stat-card-sub {
  font-size: 11px;
  color: var(--text-light);
  margin-top: 2px;
}

.chart-card {
  background: var(--white);
  border: 1px solid var(--navy-border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-card);
}
.chart-label {
  font-size: 13px;
  font-weight: 900;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 12px;
}

.stats-table-wrap {
  background: var(--white);
  border: 1px solid var(--navy-border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  margin-bottom: 14px;
}
.stats-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.stats-table thead tr {
  background: var(--navy);
}
.stats-table thead th {
  padding: 10px 12px;
  color: var(--gold);
  font-weight: 900;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  text-align: left;
}
.stats-table thead th:not(:first-child) { text-align: right; }
.stats-table tbody tr {
  border-bottom: 1px solid var(--navy-border);
}
.stats-table tbody tr:last-child { border-bottom: none; }
.stats-table tbody td {
  padding: 10px 12px;
  color: var(--navy);
  font-weight: 700;
}
.stats-table tbody td:not(:first-child) {
  text-align: right;
  color: var(--text-light);
}
.stats-table .pint-bar-cell { padding: 10px 12px; }
.pint-bar-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
}
.pint-bar {
  height: 6px;
  border-radius: 3px;
  background: var(--navy);
  min-width: 2px;
  transition: width 0.4s ease;
}

/* ─── Larger screens ───────────────────────────────────────── */
@media (min-width: 600px) {
  .app-main { max-width: 540px; margin-left: auto; margin-right: auto; }
}