/* HPF Jobs theme - matches halfpastfive.com's palette (dark, red accent).
   Bootstrap 5.3 exposes most of its colors as CSS variables, so this file
   mostly just overrides those variables plus a handful of components
   Bootstrap doesn't theme through variables alone. Keep this in sync by
   hand if the marketing site's palette ever changes - there's no shared
   source between the two right now. */

:root {
  --hpf-bg: #08090c;
  --hpf-bg-alt: #111319;
  --hpf-bg-card: #15171f;
  --hpf-border: #2a2d38;
  --hpf-text: #f5f6f8;
  --hpf-muted: #9a9fae;
  --hpf-muted-2: #6f7383;
  --hpf-red: #e6293f;
  --hpf-red-dark: #b81f30;
  --hpf-blue: #7fa0e8;
  --hpf-radius: 10px;
}

body {
  background-color: var(--hpf-bg);
  color: var(--hpf-text);
  font-family: "Poppins", system-ui, -apple-system, sans-serif;
}

/* --- Bootstrap variable overrides (5.3's color-mode variables) --- */
[data-bs-theme="dark"] {
  --bs-body-bg: var(--hpf-bg);
  --bs-body-color: var(--hpf-text);
  --bs-border-color: var(--hpf-border);
  --bs-border-color-translucent: var(--hpf-border);
  --bs-secondary-color: var(--hpf-muted);
  --bs-secondary-bg: var(--hpf-bg-card);
  --bs-tertiary-bg: var(--hpf-bg-alt);
  --bs-primary: var(--hpf-red);
  --bs-primary-rgb: 230, 41, 63;
  --bs-link-color: var(--hpf-blue);
  --bs-link-hover-color: #a4bdf0;
  --bs-link-color-rgb: 127, 160, 232;
}

.navbar,
.navbar.bg-dark {
  background-color: rgba(8, 9, 12, 0.92) !important;
  border-bottom: 1px solid var(--hpf-border);
}

.navbar-brand {
  font-weight: 600;
  letter-spacing: 0.02em;
}

.card {
  background-color: var(--hpf-bg-card);
  border: 1px solid var(--hpf-border);
  box-shadow: none;
}

.card-header {
  background-color: var(--hpf-bg-alt);
  border-bottom: 1px solid var(--hpf-border);
  font-weight: 600;
}

.list-group-item {
  background-color: var(--hpf-bg-card);
  border-color: var(--hpf-border);
  color: var(--hpf-text);
}

.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--hpf-text);
  --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
  --bs-table-hover-bg: rgba(255, 255, 255, 0.05);
  --bs-table-border-color: var(--hpf-border);
}

.table.bg-white {
  background-color: var(--hpf-bg-card) !important;
}

.btn-primary {
  --bs-btn-bg: var(--hpf-red);
  --bs-btn-border-color: var(--hpf-red);
  --bs-btn-hover-bg: var(--hpf-red-dark);
  --bs-btn-hover-border-color: var(--hpf-red-dark);
  --bs-btn-active-bg: var(--hpf-red-dark);
  --bs-btn-active-border-color: var(--hpf-red-dark);
  border-radius: 999px;
  font-weight: 600;
}

.btn-outline-primary {
  --bs-btn-color: var(--hpf-text);
  --bs-btn-border-color: var(--hpf-border);
  --bs-btn-hover-bg: var(--hpf-red);
  --bs-btn-hover-border-color: var(--hpf-red);
  border-radius: 999px;
}

.btn-outline-secondary,
.btn-outline-danger,
.btn-outline-success,
.btn-outline-warning {
  border-radius: 999px;
}

.btn,
.form-control,
.form-select {
  border-radius: var(--hpf-radius);
}

.form-control,
.form-select {
  background-color: var(--hpf-bg-alt);
  border-color: var(--hpf-border);
  color: var(--hpf-text);
}
.form-control:focus,
.form-select:focus {
  background-color: var(--hpf-bg-alt);
  color: var(--hpf-text);
  border-color: var(--hpf-red);
  box-shadow: 0 0 0 0.2rem rgba(230, 41, 63, 0.25);
}
.form-control::placeholder {
  color: var(--hpf-muted-2);
}

.text-muted {
  color: var(--hpf-muted) !important;
}

.alert-info { background-color: rgba(127, 160, 232, 0.15); color: var(--hpf-text); border-color: var(--hpf-blue); }
.alert-success { background-color: rgba(45, 164, 98, 0.18); color: var(--hpf-text); border-color: #2da462; }
.alert-warning { background-color: rgba(230, 170, 41, 0.18); color: var(--hpf-text); border-color: #e6aa29; }
.alert-danger { background-color: rgba(230, 41, 63, 0.18); color: var(--hpf-text); border-color: var(--hpf-red); }

.badge-status-draft { background-color: var(--hpf-muted-2); }
.badge-status-scheduled { background-color: var(--hpf-blue); color: #0a1020; }
.badge-status-in_progress { background-color: #e6812e; }
.badge-status-complete { background-color: #2da462; }
.badge-status-invoiced { background-color: #8a5fe0; }
.badge-status-cancelled { background-color: var(--hpf-red); }

.over-budget { color: var(--hpf-red); font-weight: 600; }

.day-column {
  min-height: 200px;
  min-width: 130px;
  background: var(--hpf-bg-card);
  border: 1px solid var(--hpf-border);
  border-radius: var(--hpf-radius);
  padding: 8px;
}
.day-column.is-today {
  border-color: var(--hpf-red);
}

/* Dispatch's 7-day row: scroll horizontally on narrow screens instead of
   squeezing 7 columns unreadably thin. */
.week-strip {
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 4px;
}
.week-strip > [class^="col"],
.week-strip > [class*=" col"] {
  min-width: 130px;
  flex: 0 0 130px;
}

/* Every data table on a small screen scrolls sideways in its own box
   rather than blowing out the page width. */
.table-responsive {
  border-radius: var(--hpf-radius);
}

@media (max-width: 575.98px) {
  .container-fluid.px-4 {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
}

/* Printing generally - the app is dark-themed (data-bs-theme="dark" on
   <html>), which prints badly (a near-black background eating ink/toner
   and washing out text), so force light for print rather than trying to
   make the dark theme itself print-safe. This is a fallback for any page
   without its own print layout; nav/buttons/etc. that don't belong on a
   printout get class="no-print" wherever they appear. */
@media print {
  .navbar,
  .no-print {
    display: none !important;
  }
  body,
  .card,
  .table {
    background: #fff !important;
    color: #000 !important;
  }
  .card {
    border-color: #ccc !important;
  }
  .table {
    --bs-table-color: #000;
    --bs-table-bg: #fff;
    --bs-table-border-color: #ccc;
  }
  .badge {
    border: 1px solid #000;
    color: #000 !important;
    background: #fff !important;
  }
  .container-fluid {
    padding: 0 !important;
  }
}

/* Printable estimate (app/templates/estimates/detail.html) - a dedicated
   document-style layout for print, not just the on-screen table with the
   dark theme stripped out. The on-screen cards/table are marked
   .no-print (hidden above) and this block (normally display:none via
   Bootstrap's d-none, shown via d-print-block) is what actually prints -
   one line item per row, description/SKU/qty/price broken out clearly,
   like a real quote rather than a screenshot of the app. */
@media print {
  .print-estimate {
    color: #000;
    font-size: 12pt;
  }
  .print-estimate .print-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 2px solid #000;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
  }
  .print-estimate .print-letterhead {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .print-estimate .print-logo {
    height: 46px;
    width: auto;
    margin-bottom: 4px;
  }
  .print-estimate .print-company-address {
    font-size: 9pt;
    color: #444;
    line-height: 1.4;
  }
  .print-estimate .print-meta {
    text-align: right;
    font-size: 10pt;
    line-height: 1.5;
  }
  .print-estimate .print-meta h2 {
    margin: 0 0 0.25rem 0;
    font-size: 16pt;
  }
  .print-estimate .print-customer {
    font-size: 11pt;
    line-height: 1.5;
    margin-bottom: 1rem;
  }
  .print-estimate .print-section-label {
    font-size: 9pt;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #666;
  }
  .print-estimate .print-customer-name {
    font-weight: 600;
  }
  .print-estimate .print-line-items {
    margin-bottom: 1rem;
  }
  .print-estimate .print-line-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid #ccc;
  }
  .print-estimate .print-line-item-thumb {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border: 1px solid #ccc;
    flex: 0 0 auto;
  }
  .print-estimate .print-line-item-main {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1 1 auto;
  }
  .print-estimate .print-line-item-title {
    font-weight: 600;
  }
  .print-estimate .print-line-item-detail {
    font-size: 10pt;
    color: #444;
  }
  .print-estimate .print-line-item-amount {
    text-align: right;
    white-space: nowrap;
    flex: 0 0 auto;
  }
  .print-estimate .print-line-item-amount .print-line-item-total {
    font-weight: 600;
  }
  .print-estimate .print-line-item-amount .print-line-item-detail {
    text-align: right;
  }
  .print-estimate .print-total {
    display: flex;
    justify-content: space-between;
    font-size: 13pt;
    font-weight: 700;
    border-top: 2px solid #000;
    padding-top: 0.5rem;
  }
  .print-estimate .print-notes {
    margin-top: 1.5rem;
    font-size: 10pt;
  }
  .print-estimate .print-notes p {
    white-space: pre-wrap;
    margin: 0.25rem 0 0 0;
  }
  @page {
    margin: 1.5cm;
  }
}