:root {
  /* GLOBOiL brand palette: black wordmark + orange→gold gradient accent */
  --gb-black: #111418;
  --gb-black-2: #1c2026;
  --gb-orange: #f7941d;   /* primary accent */
  --gb-orange-deep: #ef7d00;
  --gb-gold: #fdb813;     /* gradient highlight */
  --gb-grad: linear-gradient(135deg, #ef7d00 0%, #f7941d 45%, #fdb813 100%);
  --gb-bg: #f4f5f7;
  --gb-ink: #1f2733;
}

body {
  background: var(--gb-bg);
  color: var(--gb-ink);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}

a { text-decoration: none; }

/* Brand / navbar */
.navbar-brand { font-weight: 700; letter-spacing: .3px; display: flex; align-items: center; gap: .5rem; }
.navbar-brand img { height: 30px; }
.gb-navbar { background: #fff; border-bottom: 3px solid var(--gb-orange); }
.gb-navbar .nav-link, .gb-navbar .navbar-brand { color: var(--gb-ink) !important; }
.gb-navbar .nav-link.active { font-weight: 600; color: var(--gb-orange-deep) !important; border-bottom: 2px solid var(--gb-orange); }
.gb-navbar .nav-link:hover { color: var(--gb-orange-deep) !important; }
.gb-navbar .navbar-toggler { border-color: rgba(17,20,24,.15); }
.gb-navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(31,39,51,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.brand-tag { font-size: .62rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gb-orange); }

/* Cards & stats */
.card { border: none; border-radius: 14px; box-shadow: 0 2px 12px rgba(17,20,24,.07); }
.stat-card { border-radius: 14px; overflow: hidden; }
.stat-card .stat-value { font-size: 1.55rem; font-weight: 700; }
.stat-card .stat-label { font-size: .8rem; opacity: .9; text-transform: uppercase; letter-spacing: .4px; }
.stat-icon { font-size: 1.6rem; opacity: .4; }

/* The legacy "green" utility classes now carry the GLOBOiL black/orange identity */
.bg-gb-green { background: var(--gb-black); color: #fff; }
.bg-gb-green .stat-value { color: var(--gb-gold); }
.bg-gb-amber { background: var(--gb-grad); color: #2a1a00; }
.text-gb-green { color: var(--gb-orange-deep) !important; }

.btn-gb { background: var(--gb-grad); border: none; color: #2a1500; font-weight: 600; }
.btn-gb:hover { filter: brightness(.94); color: #2a1500; }

.btn-warning { background: var(--gb-grad); border: none; color: #2a1500; font-weight: 600; }
.btn-warning:hover { filter: brightness(.94); }

/* Hero / landing */
.hero {
  background:
    radial-gradient(900px 300px at 85% -10%, rgba(247,148,29,.28), transparent 60%),
    linear-gradient(135deg, #fffdf9 0%, #fdf3e2 60%, #fbe6c8 100%);
  color: var(--gb-ink); border-radius: 18px;
  border: 1px solid rgba(239,125,0,.15);
}
.hero .lead { color: #4a5261; }
.hero .badge-amber { background: var(--gb-grad); color: #2a1a00; }
.hero .text-accent { color: var(--gb-orange-deep); }

/* Reward result */
.reward-amount { font-size: 3rem; font-weight: 800; color: var(--gb-orange-deep); }

/* OTP display */
.otp-display {
  font-size: 2.2rem; font-weight: 800; letter-spacing: .5rem;
  color: var(--gb-orange-deep); background: #fff7ec; border: 1px dashed var(--gb-orange);
  border-radius: 12px; padding: .6rem 1rem; display: inline-block;
}

/* Tables */
.table thead th { background: #f0f1f3; color: #344; font-size: .82rem; text-transform: uppercase; letter-spacing: .3px; }
.table td { vertical-align: middle; }

/* QR print sheet */
.qr-grid { display: grid; grid-template-columns: repeat(auto-fill, var(--qr-cell-size, 1.8in)); gap: 14px; justify-content: start; }
.qr-cell { border: 1px dashed #999; border-radius: 10px; padding: 10px; text-align: center; position: relative; width: var(--qr-cell-size, 1.8in); min-height: var(--qr-cell-height, var(--qr-cell-size, 1.8in)); }
.qr-cell img, .qr-cell canvas { width: 100% !important; height: auto !important; max-width: 1.5in; }
.qr-cell .reprint-note {
  margin-top: 4px; color: #c00; font-weight: 700; font-size: .72rem;
  text-transform: uppercase; letter-spacing: .03em;
}

@media print {
  .no-print { display: none !important; }
  body { background: #fff; }
  .qr-cell { border-color: #333; }
}

/* Mobile bottom tab bar (technician view — mobile browser + installed PWA) */
.gb-tabbar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
  background: #fff; border-top: 3px solid var(--gb-orange);
  align-items: flex-end; justify-content: space-around;
  padding: 6px 4px calc(10px + env(safe-area-inset-bottom, 10px));
  box-shadow: 0 -4px 14px rgba(0,0,0,.06);
}
.gb-tab {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  width: 60px; padding: 0; border: none; background: none;
  color: #9aa0a8; font-size: .64rem; font-weight: 600; text-decoration: none;
  line-height: 1.2;
}
.gb-tab i { font-size: 1.25rem; line-height: 1; }
.gb-tab.active { color: var(--gb-orange-deep); }
.gb-tab.dropdown-toggle::after { display: none; }
.gb-tab-wrap { display: flex; flex-direction: column; align-items: center; }

.gb-tab-fab { width: 60px; margin-top: -22px; }
.gb-fab {
  width: 50px; height: 50px; border-radius: 50%; background: var(--gb-grad);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 14px -3px rgba(239,125,0,.55), 0 0 0 4px #fff;
  margin-bottom: 2px;
}
.gb-fab i { color: #2a1a00; font-size: 1.35rem; }
.gb-tab-fab.active .gb-fab { box-shadow: 0 6px 14px -3px rgba(239,125,0,.55), 0 0 0 4px var(--gb-bg); }

@media (max-width: 767.98px) {
  body.has-gb-tabbar .gb-tabbar { display: flex; }
  body.has-gb-tabbar main { padding-bottom: 84px; }
}