/* Pioneer Pallet brand theme — carries over the original site's brown/tan palette. */
:root {
  --pp-tan: #e0d7c1;          /* header background */
  --pp-brown: #5d4037;        /* primary brown text */
  --pp-brown-dark: #3e2723;   /* darkest brown */
  --pp-brown-mid: #8d6e63;    /* borders / accents */
  --pp-brown-soft: #795548;   /* taglines */
  --pp-tan-hover: #c1b39f;    /* nav hover */
  --pp-page-bg: #f4f4f4;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
  color: #333;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--pp-page-bg);
}

/* Header + nav */
header.pp-header {
  background: var(--pp-tan);
  color: var(--pp-brown);
  padding: 10px 20px;
  border-bottom: 3px solid var(--pp-brown-mid);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
header.pp-header img.logo { height: 50px; width: auto; max-width: 220px; cursor: pointer; }

nav.pp-nav ul { list-style: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; }
nav.pp-nav li { margin: 5px 10px; }
nav.pp-nav a {
  color: var(--pp-brown);
  text-decoration: none;
  padding: 5px 10px;
  border-radius: 4px;
  transition: background-color 0.2s ease;
  white-space: nowrap;
}
nav.pp-nav a:hover, nav.pp-nav a.active {
  background-color: var(--pp-tan-hover);
  color: var(--pp-brown-dark);
}
nav.pp-nav .pp-auth { margin-left: 8px; font-size: 0.9em; opacity: 0.9; }

/* Content container */
.pp-container {
  max-width: 1100px;
  width: 95%;
  margin: 20px auto;
  padding: 25px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  border-radius: 8px;
  flex-grow: 1;
}

.pp-container h2 { color: var(--pp-brown); margin-bottom: 12px; }
.pp-container h3 { color: var(--pp-brown); margin-bottom: 6px; }

/* Home */
.pp-home { text-align: center; }
.pp-home .tagline { font-style: italic; color: var(--pp-brown-soft); margin-bottom: 15px; font-size: 1.1em; }
.pp-home .welcome { margin-top: 20px; font-size: 1.2em; }
.pp-home .since { font-weight: bold; margin-bottom: 20px; }
.pp-home img.aerial-photo { max-width: 100%; height: auto; display: block; margin: 20px auto; border: 1px solid #ccc; box-shadow: 0 2px 5px rgba(0,0,0,0.2); }
.pp-home .home-phone { font-weight: bold; margin-top: 15px; }

/* Contact */
.pp-contact address { font-style: normal; margin-bottom: 20px; line-height: 1.8; }
.pp-contact .contact-group { margin-bottom: 20px; }
.pp-contact ul { list-style: none; padding-left: 0; }
.pp-contact li { margin-bottom: 5px; }
.pp-contact a { color: var(--pp-brown-mid); text-decoration: none; }
.pp-contact a:hover { text-decoration: underline; }

/* Directions */
.pp-directions .controls { margin-bottom: 15px; display: flex; flex-wrap: wrap; gap: 10px; }
.pp-directions input[type="text"] { flex-grow: 1; padding: 8px; border: 1px solid #ccc; border-radius: 4px; min-width: 200px; }
.pp-btn {
  padding: 8px 15px;
  background-color: var(--pp-brown-mid);
  color: #fff; border: none; border-radius: 4px; cursor: pointer;
  transition: background-color 0.2s ease;
}
.pp-btn:hover { background-color: var(--pp-brown); }
#map { height: 450px; width: 100%; border: 1px solid #ccc; margin-bottom: 15px; background-color: #e0e0e0; }
#map p { text-align: center; padding-top: 50px; color: #666; }
#directions-panel { max-height: 300px; overflow-y: auto; padding: 10px; border: 1px solid #eee; background-color: #fdfdfd; font-size: 0.9em; min-height: 50px; }

/* Pallets 3D viewer */
.pp-pallets .pallet-controls { margin-bottom: 20px; display: flex; align-items: center; gap: 15px; flex-wrap: wrap; }
.pp-pallets select { padding: 8px; min-width: 200px; border: 1px solid #ccc; border-radius: 4px; }
model-viewer { width: 100%; height: 460px; background-color: #fafafa; border: 1px solid #ddd; border-radius: 6px; }

/* Footer */
footer.pp-footer {
  background: var(--pp-brown);
  color: var(--pp-tan);
  text-align: center;
  padding: 15px 0;
  margin-top: auto;
  font-size: 0.9em;
}

/* ---- Quote entry: emulate the spreadsheet's colour conventions (spec §4) ---- */
.pp-quote table { border-collapse: collapse; }
.pp-quote th, .pp-quote td { border: 1px solid #ccc; padding: 3px 5px; text-align: right; }
.pp-quote th { background: #efe9dc; color: var(--pp-brown); text-align: center; }
.pp-quote input, .pp-quote select { width: 100%; box-sizing: border-box; padding: 3px; border: 1px solid #bbb; text-align: right; }
.pp-quote .lbl { text-align: left; font-weight: bold; color: var(--pp-brown); }
.pp-quote .grp { background: var(--pp-tan); font-weight: bold; text-align: center; }

/* input = light blue (spec: "ONLY EDIT THE BLUE SHADED BOXES") */
.pp-in, .pp-quote input.pp-in, .pp-quote select.pp-in { background: #d6e6f5; }
/* yellow = pricing total BF */
.pp-yellow { background: #fff3b0; }
/* gray = informational / auto-calculated */
.pp-gray { background: #e4e4e4; color: #333; }
/* green = doubled-board spacing input */
.pp-green, .pp-quote input.pp-green { background: #c5e1a5; }
/* red text = key result */
.pp-redtext { color: #c62828; font-weight: bold; }

.pp-legend span { display:inline-block; padding:2px 8px; margin-right:8px; border:1px solid #999; font-size:0.85em; }
.pp-summary td { border: none; padding: 2px 8px; }
.pp-summary .k { text-align: left; }
.pp-summary .v { text-align: right; font-family: monospace; }
.pp-calc-box { background:#fff; border:1px solid #ccc; border-radius:6px; padding:12px; margin-top:12px; }
.pp-gotopricing { background:#fff; border:2px solid var(--pp-brown-mid); border-radius:6px; padding:10px; }
.pp-gotopricing td { border:none; padding:2px 6px; color:#c62828; }

/* ---- CRM module ---- */
.crm-subnav { display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin:-8px 0 16px; padding-bottom:10px; border-bottom:2px solid var(--pp-brown-mid); }
.crm-subnav a { color:var(--pp-brown); text-decoration:none; padding:6px 12px; border-radius:4px 4px 0 0; font-weight:600; }
.crm-subnav a:hover { background:var(--pp-tan-hover); }
.crm-subnav a.active { background:var(--pp-brown-mid); color:#fff; }
.crm-subnav .spacer { flex:1; }

.crm-toolbar { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:12px 0; }
.crm-toolbar input[type=text], .crm-toolbar select { padding:6px; border:1px solid #bbb; border-radius:4px; }

table.crm-grid { width:100%; border-collapse:collapse; font-size:0.93em; }
table.crm-grid th { text-align:left; border-bottom:2px solid var(--pp-brown-mid); padding:7px 6px; color:var(--pp-brown); }
table.crm-grid th.sortable { cursor:pointer; user-select:none; }
table.crm-grid td { padding:7px 6px; border-bottom:1px solid #eee; }
table.crm-grid tbody tr { cursor:pointer; }
table.crm-grid tbody tr:hover { background:#faf7f0; }

/* pipeline stage badges */
.crm-badge { display:inline-block; padding:2px 8px; border-radius:10px; font-size:0.82em; font-weight:600; white-space:nowrap; }
.crm-stage-New        { background:#e3f2fd; color:#1565c0; }
.crm-stage-Contacted  { background:#fff8e1; color:#e69500; }
.crm-stage-Quoting    { background:#ede7f6; color:#5e35b1; }
.crm-stage-Won        { background:#e8f5e9; color:#2e7d32; }
.crm-stage-Lost       { background:#ffebee; color:#c62828; }
.crm-stage-none       { background:#eceff1; color:#78909c; }

.crm-pill { display:inline-block; padding:1px 7px; border-radius:8px; font-size:0.78em; font-weight:600; }
.crm-pri-High { background:#ffebee; color:#c62828; }
.crm-pri-Medium { background:#e3f2fd; color:#1565c0; }
.crm-pri-Low { background:#eceff1; color:#607d8b; }
.crm-followup-due { color:#c62828; font-weight:700; }

/* modal (shared with tracker pattern) */
.crm-modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:1000; overflow:auto; }
.crm-modal .box { background:#fff; max-width:900px; margin:3% auto; padding:22px; border-radius:8px; }
.crm-modal .box.wide { max-width:1040px; }
.crm-modal label { font-size:0.9em; color:var(--pp-brown); }
.crm-modal input[type=text], .crm-modal input[type=date], .crm-modal input[type=datetime-local],
.crm-modal input[type=number], .crm-modal input[type=email], .crm-modal select, .crm-modal textarea {
  width:100%; padding:6px; border:1px solid #bbb; border-radius:4px; }
.crm-field { flex:1; min-width:150px; }
.crm-row { display:flex; gap:10px; flex-wrap:wrap; margin-top:8px; }
.crm-tabbtn { padding:5px 12px; border:none; border-radius:4px 4px 0 0; background:#cfc3b4; color:var(--pp-brown-dark); cursor:pointer; font-weight:600; }
.crm-tabbtn.active { background:var(--pp-brown-mid); color:#fff; }
.crm-timeline .item { border-left:3px solid var(--pp-brown-mid); padding:6px 10px; margin:6px 0; background:#faf7f0; border-radius:0 4px 4px 0; }
.crm-timeline .item small { color:#888; }

/* dashboard cards */
.crm-cards { display:flex; gap:16px; flex-wrap:wrap; }
.crm-card { flex:1; min-width:240px; background:#fff; border:1px solid #e0d7c1; border-radius:8px; padding:14px; box-shadow:0 1px 4px rgba(0,0,0,0.06); }
.crm-card h3 { margin-bottom:8px; border-bottom:1px solid #eee; padding-bottom:6px; }
.crm-stat { font-size:2em; font-weight:700; color:var(--pp-brown); }
.crm-pipeline-bar { display:flex; height:26px; border-radius:4px; overflow:hidden; margin:8px 0; }
.crm-pipeline-bar span { display:flex; align-items:center; justify-content:center; color:#fff; font-size:0.8em; }

/* calendar */
.crm-cal { width:100%; border-collapse:collapse; table-layout:fixed; }
.crm-cal th { border:1px solid #ddd; padding:6px; background:#efe9dc; color:var(--pp-brown); }
.crm-cal td { border:1px solid #ddd; vertical-align:top; height:96px; padding:4px; }
.crm-cal td.other-month { background:#f7f7f7; color:#bbb; }
.crm-cal td.today { background:#fffdf0; }
.crm-cal .daynum { font-size:0.8em; color:#999; }
.crm-cal .ev { font-size:0.76em; border-radius:3px; padding:1px 4px; margin:2px 0; color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.crm-cal .ev-meeting { background:#1976d2; }
.crm-cal .ev-task { background:#f57c00; }
.crm-cal .ev-followup { background:#388e3c; }

@media (max-width: 768px) {
  header.pp-header { flex-direction: column; text-align: center; }
  nav.pp-nav ul { justify-content: center; }
  .pp-container { margin: 10px; padding: 15px; }
  .pp-directions .controls { flex-direction: column; }
}