/* ===== Reset ===== */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: #f8f9fa;
  color: #202124;
}

/* ===== Plywood "Value" stamp background ===== */
.plywood-bg {
  /* Paste this rule into public.css right after the body rule */
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22300%22%20height%3D%22300%22%20viewBox%3D%220%200%20300%20300%22%3E%3Ctext%20x%3D%2260%22%20y%3D%2270%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2216%22%20font-weight%3D%22600%22%20fill%3D%22%237c623e%22%20fill-opacity%3D%220.15%22%20transform%3D%22rotate%28-15%2060%2070%29%22%3EValue%3C%2Ftext%3E%3Ctext%20x%3D%22160%22%20y%3D%2255%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2214%22%20font-weight%3D%22600%22%20fill%3D%22%237c623e%22%20fill-opacity%3D%220.12%22%20transform%3D%22rotate%2810%20160%2055%29%22%3EValue%3C%2Ftext%3E%3Ctext%20x%3D%22240%22%20y%3D%2285%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2218%22%20font-weight%3D%22600%22%20fill%3D%22%237c623e%22%20fill-opacity%3D%220.18%22%20transform%3D%22rotate%28-28%20240%2085%29%22%3EValue%3C%2Ftext%3E%3Ctext%20x%3D%2285%22%20y%3D%22145%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2220%22%20font-weight%3D%22600%22%20fill%3D%22%237c623e%22%20fill-opacity%3D%220.15%22%20transform%3D%22rotate%280%2085%20145%29%22%3EValue%3C%2Ftext%3E%3Ctext%20x%3D%22195%22%20y%3D%22135%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2213%22%20font-weight%3D%22600%22%20fill%3D%22%237c623e%22%20fill-opacity%3D%220.20%22%20transform%3D%22rotate%2822%20195%20135%29%22%3EValue%3C%2Ftext%3E%3Ctext%20x%3D%22250%22%20y%3D%22190%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2216%22%20font-weight%3D%22600%22%20fill%3D%22%237c623e%22%20fill-opacity%3D%220.15%22%20transform%3D%22rotate%28-10%20250%20190%29%22%3EValue%3C%2Ftext%3E%3Ctext%20x%3D%2245%22%20y%3D%22205%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2215%22%20font-weight%3D%22600%22%20fill%3D%22%237c623e%22%20fill-opacity%3D%220.12%22%20transform%3D%22rotate%2818%2045%20205%29%22%3EValue%3C%2Ftext%3E%3Ctext%20x%3D%22140%22%20y%3D%22245%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2217%22%20font-weight%3D%22600%22%20fill%3D%22%237c623e%22%20fill-opacity%3D%220.18%22%20transform%3D%22rotate%28-24%20140%20245%29%22%3EValue%3C%2Ftext%3E%3Ctext%20x%3D%22220%22%20y%3D%22255%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2214%22%20font-weight%3D%22600%22%20fill%3D%22%237c623e%22%20fill-opacity%3D%220.15%22%20transform%3D%22rotate%286%20220%20255%29%22%3EValue%3C%2Ftext%3E%3Ctext%20x%3D%2235%22%20y%3D%22105%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2212%22%20font-weight%3D%22600%22%20fill%3D%22%237c623e%22%20fill-opacity%3D%220.18%22%20transform%3D%22rotate%28-6%2035%20105%29%22%3EValue%3C%2Ftext%3E%3Ctext%20x%3D%22250%22%20y%3D%2245%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2215%22%20font-weight%3D%22600%22%20fill%3D%22%237c623e%22%20fill-opacity%3D%220.15%22%20transform%3D%22rotate%2816%20250%2045%29%22%3EValue%3C%2Ftext%3E%3Ctext%20x%3D%22165%22%20y%3D%2295%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2216%22%20font-weight%3D%22600%22%20fill%3D%22%237c623e%22%20fill-opacity%3D%220.12%22%20transform%3D%22rotate%28-18%20165%2095%29%22%3EValue%3C%2Ftext%3E%3Ctext%20x%3D%2295%22%20y%3D%22265%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2214%22%20font-weight%3D%22600%22%20fill%3D%22%237c623e%22%20fill-opacity%3D%220.20%22%20transform%3D%22rotate%284%2095%20265%29%22%3EValue%3C%2Ftext%3E%3Ctext%20x%3D%22255%22%20y%3D%22150%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2213%22%20font-weight%3D%22600%22%20fill%3D%22%237c623e%22%20fill-opacity%3D%220.15%22%20transform%3D%22rotate%28-20%20255%20150%29%22%3EValue%3C%2Ftext%3E%3Ctext%20x%3D%2255%22%20y%3D%22280%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2211%22%20font-weight%3D%22600%22%20fill%3D%22%237c623e%22%20fill-opacity%3D%220.18%22%20transform%3D%22rotate%2828%2055%20280%29%22%3EValue%3C%2Ftext%3E%3C%2Fsvg%3E");
  background-size: 300px 300px;
  background-attachment: fixed;
}

/* ===== Header ===== */
.public-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 24px;
  background: #fff;
  border-bottom: 1px solid #e0e0e0;
}

/* Left */
.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.brand {
  font-weight: 700;
  text-decoration: none;
  color: #0f172a;
  font-size: 20px;
  letter-spacing: -0.3px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.brand-mark {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  box-shadow: 0 4px 10px rgba(59, 130, 246, 0.35);
}

.nav-link {
  text-decoration: none;
  color: #3c4043;
  font-size: 14px;
}

/* Right */
.header-right {
  position: relative;
}

.apps-btn {
  background: transparent;
  border: none;
  font-size: 18px;
  cursor: pointer;
  padding: 6px;
}

/* ===== Apps Menu ===== */
.apps-menu {
  position: absolute;
  right: 0;
  top: 36px;
  width: 220px;
  background: #fff;
  border: 1px solid #dadce0;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  display: none;
  padding: 8px 0;
  z-index: 1000;
}

.apps-menu a {
  display: block;
  padding: 10px 16px;
  text-decoration: none;
  color: #202124;
  font-size: 14px;
}

.apps-menu a:hover {
  background: #f1f3f4;
}

.menu-divider {
  height: 1px;
  background: #e0e0e0;
  margin: 6px 0;
}

.menu-group.secondary a {
  color: #5f6368;
}

.kpi strong {
  font-size: 12px;
  color: #64748b;
}
.kpi {
  word-break: break-word; /* Prevents long values from overflowing */
}

/* ===== Site Footer / Copyright ===== */
.site-footer {
  background: #0f172a;
  color: rgba(255, 255, 255, 0.65);
  padding: 24px;
  text-align: center;
  font-size: 13px;
}

.footer-bottom {
  max-width: 1200px;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.55);
}

.footer-bottom span {
  display: inline-block;
}