/* ELEV8 Hauler Portal & Admin — shared theme (contractor-style) */
:root {
  --hp-bg: #f5f6f7; --hp-surface: #ffffff; --hp-border: #d8dde2;
  --hp-text: #1d2733; --hp-muted: #5d6975;
  --hp-accent: #026928; --hp-accent-d: #014d1d; --hp-faint: #e8f1ec;
  --hp-danger: #c0392b; --hp-warn: #d68910; --hp-ok: #1e8449;
  --hp-header-bg: #1d2733; --hp-shadow: 0 2px 12px rgba(0,0,0,.06);
}
body.hp { background: var(--hp-bg); color: var(--hp-text); font-family: 'Source Sans 3', system-ui, sans-serif; margin: 0; }
.hp-header { background: var(--hp-header-bg); color: #fff; padding: 14px 0; border-bottom: 3px solid var(--hp-accent); }
.hp-header-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; }
.hp-header a.hp-brand { color: #fff; text-decoration: none; font-family: 'Oswald', sans-serif; font-size: 1.2rem; font-weight: 600; display: flex; align-items: center; gap: 10px; }
.hp-header a.hp-brand img { height: 36px; }
.hp-nav { display: flex; gap: 4px; flex-wrap: wrap; }
.hp-nav a { color: rgba(255,255,255,.78); text-decoration: none; font-size: .9rem; font-weight: 500; padding: 8px 14px; border-radius: 4px; }
.hp-nav a:hover, .hp-nav a.active { background: rgba(255,255,255,.1); color: #fff; }
.hp-user { font-size: .85rem; color: rgba(255,255,255,.7); display: flex; align-items: center; gap: 10px; }
.hp-user button { background: none; border: 1px solid rgba(255,255,255,.3); color: #fff; padding: 5px 12px; border-radius: 4px; cursor: pointer; font-size: .82rem; }
.hp-user button:hover { background: rgba(255,255,255,.12); }
.hp-wrap { max-width: 1200px; margin: 0 auto; padding: 24px; }
.hp-page-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 18px; flex-wrap: wrap; gap: 12px; }
.hp-page-head h1 { margin: 0; font-family: 'Oswald', sans-serif; font-size: 1.6rem; }
.hp-page-head p { margin: 4px 0 0; color: var(--hp-muted); font-size: .95rem; }
.hp-card { background: var(--hp-surface); border: 1px solid var(--hp-border); border-radius: 8px; box-shadow: var(--hp-shadow); margin-bottom: 18px; }
.hp-card-header { padding: 14px 20px; border-bottom: 1px solid var(--hp-border); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.hp-card-header h2 { margin: 0; font-family: 'Oswald', sans-serif; font-size: 1.05rem; font-weight: 600; }
.hp-card-body { padding: 20px; }
table.hp-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.hp-table th { text-align: left; font-family: 'Oswald', sans-serif; font-weight: 500; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--hp-muted); padding: 10px 14px; border-bottom: 1px solid var(--hp-border); background: #f8f9fa; }
table.hp-table td { padding: 12px 14px; border-bottom: 1px solid var(--hp-border); vertical-align: middle; }
table.hp-table tr:last-child td { border-bottom: none; }
table.hp-table tr:hover td { background: #f8fafa; }
table.hp-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.hp-btn { font-family: 'Oswald', sans-serif; font-weight: 500; font-size: .85rem; letter-spacing: .03em; padding: 7px 14px; border-radius: 4px; cursor: pointer; border: 1px solid var(--hp-border); background: #fff; color: var(--hp-text); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.hp-btn:hover { background: var(--hp-faint); border-color: var(--hp-accent); }
.hp-btn-primary { background: var(--hp-accent); border-color: var(--hp-accent); color: #fff; }
.hp-btn-primary:hover { background: var(--hp-accent-d); }
.hp-btn-danger { background: #fff; border-color: var(--hp-danger); color: var(--hp-danger); }
.hp-btn-danger:hover { background: var(--hp-danger); color: #fff; }
.hp-btn-sm { padding: 5px 10px; font-size: .78rem; }
.hp-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.hp-field label { font-family: 'Oswald', sans-serif; font-size: .82rem; font-weight: 500; }
.hp-field label .req { color: var(--hp-danger); }
.hp-field input, .hp-field select, .hp-field textarea { padding: 9px 12px; border: 1px solid var(--hp-border); border-radius: 4px; font-family: inherit; font-size: .92rem; background: #fff; }
.hp-field input:focus, .hp-field select:focus, .hp-field textarea:focus { outline: none; border-color: var(--hp-accent); box-shadow: 0 0 0 3px rgba(2,105,40,.08); }
.hp-field input[readonly] { background: #eef0f2; color: var(--hp-muted); }
.hp-field .help { font-size: .77rem; color: var(--hp-muted); }
.hp-field .help.error { color: var(--hp-danger); font-weight: 600; }
.hp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 600px) { .hp-row { grid-template-columns: 1fr; } }
.hp-badge { display: inline-block; font-family: 'Oswald', sans-serif; font-size: .7rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 3px; }
.hp-badge-pending  { background: #fff8e1; color: #b07b00; }
.hp-badge-approved { background: #e8f5e9; color: #1e8449; }
.hp-badge-inactive { background: #fafafa; color: var(--hp-muted); }
.hp-badge-upcoming  { background: #e3f2fd; color: #1565c0; }
.hp-badge-available { background: #e8f5e9; color: #1e8449; }
.hp-badge-awarded   { background: #ede7f6; color: #6a1b9a; }
.hp-badge-completed { background: #efebe9; color: #4e342e; }
.hp-badge-cancelled { background: #ffebee; color: var(--hp-danger); }
.hp-alert { padding: 12px 16px; border-radius: 6px; font-size: .9rem; margin-bottom: 14px; }
.hp-alert-info    { background: #e3f2fd; color: #1565c0; border: 1px solid #bbdefb; }
.hp-alert-success { background: #e8f5e9; color: var(--hp-ok); border: 1px solid #c8e6c9; }
.hp-alert-warn    { background: #fff8e1; color: #b07b00; border: 1px solid #f0c674; }
.hp-alert-error   { background: #ffebee; color: var(--hp-danger); border: 1px solid #ffcdd2; }
.hp-empty { padding: 36px; text-align: center; color: var(--hp-muted); }
.hp-empty h3 { color: var(--hp-text); font-family: 'Oswald', sans-serif; }
.hp-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1000; align-items: center; justify-content: center; padding: 20px; }
.hp-modal-overlay.open { display: flex; }
.hp-modal { background: #fff; border-radius: 8px; max-width: 560px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: 0 8px 32px rgba(0,0,0,.2); }
.hp-modal-header { padding: 16px 20px; border-bottom: 1px solid var(--hp-border); display: flex; justify-content: space-between; align-items: center; }
.hp-modal-header h2 { margin: 0; font-family: 'Oswald', sans-serif; font-size: 1.1rem; }
.hp-modal-close { background: none; border: none; font-size: 1.4rem; cursor: pointer; color: var(--hp-muted); }
.hp-modal-body { padding: 20px; }
.hp-modal-footer { padding: 14px 20px; border-top: 1px solid var(--hp-border); display: flex; justify-content: flex-end; gap: 10px; }
.hp-filterbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.hp-filterbar input, .hp-filterbar select { padding: 7px 11px; border: 1px solid var(--hp-border); border-radius: 4px; font-family: inherit; font-size: .9rem; }
.hp-filterbar label { font-size: .8rem; color: var(--hp-muted); font-family: 'Oswald', sans-serif; letter-spacing: .04em; text-transform: uppercase; }
.hp-footer { padding: 18px 24px; text-align: center; font-size: .8rem; color: var(--hp-muted); }
.hp-footer code { background: rgba(0,0,0,.04); padding: 2px 6px; border-radius: 3px; font-size: .78rem; }