:root {
  --navy: #0f1f3d;
  --navy-light: #16294f;
  --accent: #d64545;
  --accent-dark: #b83838;
  --bg: #f4f6f9;
  --card: #ffffff;
  --border: #e2e6ed;
  --text: #1c2434;
  --text-muted: #6b7488;
  --green: #1a8754;
  --amber: #c78a1e;
  --blue: #2563eb;
  --gray: #6b7488;
  --radius: 8px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Top nav ---------- */

#app-nav {
  background: var(--navy);
  color: #fff;
}

.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  height: 60px;
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-brand { font-weight: 700; font-size: 1.1rem; letter-spacing: 0.02em; }

.nav-links { display: flex; gap: 20px; flex: 1; }
.nav-links a { color: #c9d2e3; font-weight: 500; }
.nav-links a:hover { color: #fff; text-decoration: none; }
.nav-links a.active { color: #fff; border-bottom: 2px solid var(--accent); padding-bottom: 18px; }

.nav-user { display: flex; align-items: center; gap: 14px; color: #c9d2e3; font-size: 0.9rem; }

/* ---------- Layout ---------- */

.page { max-width: 1200px; margin: 0 auto; padding: 32px 24px; }
.page-wide { max-width: 1600px; }
.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; }
.page-header h1 { margin: 0; font-size: 1.6rem; }
.page-header p { margin: 4px 0 0; color: var(--text-muted); }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
}

.centered-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--navy);
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  padding: 9px 16px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
}

.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-dark); text-decoration: none; }

.btn-secondary { background: #fff; color: var(--text); border-color: var(--border); }
.btn-secondary:hover { background: #f0f2f5; text-decoration: none; }

.btn-ghost { background: transparent; color: #c9d2e3; border-color: #37456b; }
.btn-ghost:hover { background: rgba(255,255,255,0.08); text-decoration: none; }

.btn-danger { background: #fff; color: var(--accent); border-color: var(--accent); }
.btn-danger:hover { background: #fdecec; text-decoration: none; }

.btn-sm { padding: 6px 10px; font-size: 0.8rem; }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* ---------- Forms ---------- */

label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 6px; color: var(--text); }
.field { margin-bottom: 18px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

input, select, textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.95rem;
  font-family: inherit;
  background: #fff;
  color: var(--text);
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(214, 69, 69, 0.12);
}

.hint { font-size: 0.8rem; color: var(--text-muted); margin-top: 4px; }
.error-box { background: #fdecec; border: 1px solid #f3b8b8; color: #a02525; padding: 10px 14px; border-radius: var(--radius); margin-bottom: 16px; font-size: 0.9rem; }
.success-box { background: #e9f7ef; border: 1px solid #b7e4c9; color: #1a6b3f; padding: 10px 14px; border-radius: var(--radius); margin-bottom: 16px; font-size: 0.9rem; }

/* ---------- Table ---------- */

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--border); font-size: 0.9rem; }
th { color: var(--text-muted); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; }
tbody tr:hover { background: #fafbfd; }

/* ---------- Excel-style grid table ---------- */

#loads-table-wrap, #tracked-loads-wrap, #shipped-loads-wrap { overflow-x: auto; }

.excel-table {
  border: 1px solid var(--border);
  table-layout: auto;
}
.excel-table th, .excel-table td {
  border: 1px solid var(--border);
  padding: 4px 8px;
  font-size: 0.72rem;
  white-space: nowrap;
}
.excel-table thead th {
  background: #eef1f6;
  position: sticky;
  top: 0;
  z-index: 1;
  user-select: none;
  white-space: normal;
}
.excel-table th.sortable { cursor: pointer; }
.excel-table th.sortable:hover { background: #e3e7ee; }
.excel-table tbody tr:nth-child(even) { background: #fafbfd; }
.excel-table tbody tr:hover { background: #fdf1ef; }
.excel-table td.row-num, .excel-table th.row-num {
  text-align: center;
  color: var(--text-muted);
  width: 1%;
}
/* Data cells truncate with an ellipsis instead of forcing the column to
   fit the longest value ever entered -- hover (title attr) or click the
   row to see the full value. Caps are sized to typical content, not the
   (often longer) header label, since headers are allowed to wrap above. */
.excel-table tbody td {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Inline cell editing (admins only) ---------- */

.excel-table td.editable-cell { cursor: pointer; }
.excel-table td.editable-cell:hover { background: #fdecec; }
.excel-table td.editing { overflow: visible; background: #fff; }

.cell-edit-wrap { display: flex; align-items: center; gap: 3px; }
.cell-input {
  width: 100%;
  min-width: 0;
  font: inherit;
  padding: 2px 4px;
  border: 1px solid var(--accent);
  border-radius: 4px;
}
.cell-input-city { width: 58px; flex: 1; }
.cell-input-state { width: 28px; flex: none; }
.cell-save-btn, .cell-cancel-btn {
  flex: none;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
  padding: 2px;
}
.cell-save-btn { color: var(--green); }
.cell-cancel-btn { color: var(--accent); }

.excel-table td.row-actions, .excel-table th.row-actions { text-align: center; width: 1%; }
.btn-icon {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--text-muted);
  padding: 2px 4px;
}
.btn-icon:hover { color: var(--accent); }
.excel-table th:nth-child(2), .excel-table td:nth-child(2) { max-width: 85px; }   /* Priority */
.excel-table th:nth-child(3), .excel-table td:nth-child(3) { max-width: 85px; }   /* Status */
.excel-table th:nth-child(4), .excel-table td:nth-child(4) { max-width: 90px; }   /* Manifest */
.excel-table th:nth-child(5), .excel-table td:nth-child(5) { max-width: 90px; }   /* Pickup # */
.excel-table th:nth-child(6), .excel-table td:nth-child(6) { max-width: 70px; }   /* Rate */
.excel-table th:nth-child(7), .excel-table td:nth-child(7) { max-width: 70px; }   /* Covered Rate */
.excel-table th:nth-child(8), .excel-table td:nth-child(8) { max-width: 95px; }   /* Origin */
.excel-table th:nth-child(9), .excel-table td:nth-child(9) { max-width: 95px; }   /* Destination */
.excel-table th:nth-child(10), .excel-table td:nth-child(10) { max-width: 105px; } /* Pickup */
.excel-table th:nth-child(11), .excel-table td:nth-child(11) { max-width: 120px; } /* Delivery */
.excel-table th:nth-child(12), .excel-table td:nth-child(12) { max-width: 115px; } /* Truck#/Broker */
.excel-table th:nth-child(13), .excel-table td:nth-child(13) { max-width: 150px; } /* Notes */

/* ---------- Badges ---------- */

.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: capitalize;
}
.badge-available { background: #e9f7ef; color: var(--green); }
.badge-covered { background: #fdf3e0; color: var(--amber); }
.badge-shipped { background: #e8eefc; color: var(--blue); }

.badge-priority-super_hot { background: var(--accent); color: #fff; }
.badge-priority-hot { background: #fdf3e0; color: var(--amber); }
.badge-priority-priority { background: #e8eefc; color: var(--blue); }
.badge-priority-regular { background: #eceef1; color: var(--gray); }
.badge-admin { background: #e8eefc; color: var(--blue); }
.badge-carrier { background: #eceef1; color: var(--gray); }

/* ---------- Filters ---------- */

.filters { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.filters select, .filters input { width: auto; min-width: 160px; }

/* ---------- Stats ---------- */

.stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin-bottom: 24px; }
.stat-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; }
.stat-card .num { font-size: 1.8rem; font-weight: 700; }
.stat-card .label { color: var(--text-muted); font-size: 0.85rem; margin-top: 2px; }

.empty-state { text-align: center; padding: 48px 24px; color: var(--text-muted); }

.login-card { width: 380px; }
.login-brand { text-align: center; margin-bottom: 20px; }
.login-brand .title { color: #fff; font-weight: 700; font-size: 1.3rem; }
.login-brand .subtitle { color: #9fb0d1; font-size: 0.85rem; margin-top: 4px; }

/* ---------- Search bar ---------- */

.search-bar { margin-bottom: 20px; }
.search-bar input { max-width: 480px; font-size: 1rem; padding: 12px 14px; }

/* ---------- Receiver cards ---------- */

.receivers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.receiver-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.receiver-card:hover { border-color: var(--accent); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }

.receiver-card-title { font-weight: 700; font-size: 1.05rem; margin-bottom: 8px; }
.receiver-card-row { font-size: 0.88rem; color: var(--text); margin-bottom: 6px; }
.receiver-card-row:last-child { margin-bottom: 0; }

/* ---------- Modal ---------- */

.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 31, 61, 0.55);
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px;
  overflow-y: auto;
  z-index: 100;
}
.modal-overlay.open { display: flex; }

.modal {
  background: var(--card);
  border-radius: var(--radius);
  padding: 24px;
  width: 100%;
  max-width: 560px;
}

.modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.modal-header h2 { margin: 0; font-size: 1.3rem; }

.modal-close {
  background: none;
  border: none;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  color: var(--text-muted);
  padding: 4px;
}
.modal-close:hover { color: var(--text); }

.modal-actions { display: flex; align-items: center; gap: 10px; margin-top: 20px; }

.checkbox-label { display: flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; }
.checkbox-label input[type="checkbox"] { width: auto; }