/* ===========================================================
   Dabodibo — design tokens
   Theme: the handyman's work order / ticket stub
   =========================================================== */
:root {
  --ink: #1B2430;
  --ink-soft: #3A4658;
  --paper: #F7F5EF;
  --paper-dim: #EDE9DE;
  --card: #FFFFFF;
  --blueprint: #24425B;
  --blueprint-dark: #182D3E;
  --tape: #F2A93B;
  --tape-dark: #C9861E;
  --safety: #D64545;
  --ok: #3C8A5B;
  --line: #D8D2C2;
  --radius: 10px;
  --shadow: 0 2px 10px rgba(27, 36, 48, 0.08);
  --shadow-lift: 0 10px 24px rgba(27, 36, 48, 0.14);
}

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  font-family: 'Inter', -apple-system, sans-serif;
  background: var(--paper);
  color: var(--ink);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Let the shell grow to fill leftover space so the footer pins to the
   bottom of the viewport on short pages, and flows naturally after
   content on tall ones (see .dbd-shell rule below for the actual sizing). */
.dbd-footer { flex-shrink: 0; }

.font-display {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.mono { font-family: 'IBM Plex Mono', monospace; }

a { color: var(--blueprint); text-decoration: none; }
a:hover { color: var(--tape-dark); }

/* ---------- Logo wordmark: letters cycle the brand palette ---------- */
.dbd-logo {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: 0.01em;
  display: inline-flex;
}
.dbd-logo span:nth-child(3n+1) { color: #4285F4; }
.dbd-logo span:nth-child(3n+2) { color: #EA4335; }
.dbd-logo span:nth-child(3n+3) { color: #FBBC05; }
.dbd-logo.dbd-logo-dark span { filter: brightness(1.15); }

/* ---------- Top bar ---------- */
.dbd-topbar {
  background: var(--blueprint);
  color: #fff;
  padding: 0.75rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 0.5rem;
  box-shadow: var(--shadow);
  position: sticky;
  top: 0;
  z-index: 40;
}
.dbd-topbar .dbd-tagline {
  font-size: 0.72rem;
  color: #B9C7D4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-left: 0.6rem;
  border-left: 1px solid #3E5A72;
  padding-left: 0.6rem;
}
.dbd-topbar nav {
  display: flex;
}
.dbd-topbar nav a {
  color: #DCE6EE;
  font-size: 0.9rem;
  font-weight: 600;
  margin-left: 1.25rem;
  white-space: nowrap;
}
.dbd-topbar nav a.active { color: var(--tape); }
.dbd-topbar nav a:hover { color: #fff; }

/* Below ~540px the logo + tagline + all 3 nav links no longer fit on
   one line — drop nav to its own full-width row, evenly spaced,
   instead of letting it overflow or get crushed against the logo. */
@media (max-width: 540px) {
  .dbd-topbar { padding: 0.65rem 1rem; }
  .dbd-topbar nav {
    width: 100%;
    justify-content: space-between;
  }
  .dbd-topbar nav a { margin-left: 0; font-size: 0.82rem; }
}

.dbd-shell {
  max-width: 1040px;
  margin: 0 auto;
  padding: 1.75rem 1.25rem 4rem;
  flex: 1 0 auto;
  width: 100%;
}

@media (max-width: 540px) {
  .dbd-page-title { font-size: 1.6rem; }
  .dbd-shell { padding: 1.25rem 1rem 3rem; }
}

/* ---------- Page header ---------- */
.dbd-page-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 2rem;
  color: var(--blueprint);
  letter-spacing: 0.01em;
  margin-bottom: 0.15rem;
}
.dbd-page-sub { color: var(--ink-soft); margin-bottom: 1.5rem; }

/* ---------- Ticket / work-order card ---------- */
.ticket {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.ticket-body { padding: 1.25rem 1.4rem; }

.ticket-stub {
  border-top: 2px dashed var(--line);
  position: relative;
  padding: 0.85rem 1.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--paper-dim);
}
.ticket-stub::before, .ticket-stub::after {
  content: '';
  position: absolute;
  top: -9px;
  width: 18px; height: 18px;
  background: var(--paper);
  border-radius: 50%;
  border: 1px solid var(--line);
}
.ticket-stub::before { left: -9px; }
.ticket-stub::after { right: -9px; }

.stamp {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  display: inline-block;
  text-transform: uppercase;
  border: 1.5px solid currentColor;
}
.stamp-draft { color: #8A8272; }
.stamp-pending { color: var(--tape-dark); }
.stamp-approved { color: var(--ok); }
.stamp-rejected { color: var(--safety); }
.stamp-invoiced { color: var(--blueprint); }
.stamp-partial { color: var(--tape-dark); }
.stamp-completed { color: var(--ok); }

/* ---------- Buttons ---------- */
.btn-dbd-primary {
  background: var(--tape);
  border: none;
  color: var(--blueprint-dark);
  font-weight: 700;
  padding: 0.55rem 1.15rem;
  border-radius: 8px;
  transition: transform 0.08s ease, background 0.15s ease;
}
.btn-dbd-primary:hover { background: var(--tape-dark); color: #fff; }
.btn-dbd-primary:active { transform: translateY(1px); }

.btn-dbd-outline {
  background: transparent;
  border: 1.5px solid var(--blueprint);
  color: var(--blueprint);
  font-weight: 600;
  padding: 0.5rem 1.1rem;
  border-radius: 8px;
}
.btn-dbd-outline:hover { background: var(--blueprint); color: #fff; }

.btn-dbd-danger {
  background: transparent;
  border: 1.5px solid var(--safety);
  color: var(--safety);
  font-weight: 600;
  padding: 0.4rem 0.9rem;
  border-radius: 8px;
  font-size: 0.85rem;
}
.btn-dbd-danger:hover { background: var(--safety); color: #fff; }

/* ---------- Forms ---------- */
.dbd-field label {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-bottom: 0.25rem;
}
.form-control, .form-select {
  border: 1.5px solid var(--line);
  border-radius: 8px;
  padding: 0.55rem 0.75rem;
}
.form-control:focus, .form-select:focus {
  border-color: var(--blueprint);
  box-shadow: 0 0 0 3px rgba(36, 66, 91, 0.15);
}

/* ---------- Line item row ---------- */
.item-row {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.85rem;
  margin-bottom: 0.75rem;
  background: var(--card);
  overflow: hidden;
}
.item-row .thumb {
  width: 48px; height: 48px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--line);
}

/* Field grid: fixed sensible minimums per column so numeric fields
   never get squeezed by percentage-based columns — they grow with
   extra room on wide screens instead of staying pinned narrow. */
.item-fields-grid {
  display: grid;
  grid-template-columns: minmax(160px, 2.4fr) minmax(74px, 1fr) minmax(74px, 1fr) minmax(48px, 0.55fr) minmax(74px, 1fr) minmax(84px, 1fr);
  gap: 0.5rem;
  align-items: start;
}
.item-fields-grid .field label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ink-soft);
  display: block;
  margin-bottom: 0.2rem;
}
.item-fields-grid .field.total-field { text-align: right; padding-top: 0.4rem; }
.item-fields-grid .field.total-field .f-total {
  font-weight: 600;
  white-space: nowrap;
}
.item-fields-grid .f-description { min-height: calc(1.5em + 0.5rem); line-height: 1.35; }
@media (max-width: 620px) {
  .item-fields-grid { grid-template-columns: 1fr 1fr; }
  .item-fields-grid .field.total-field { text-align: left; grid-column: span 2; }
}

.item-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: flex-start;
  margin-top: 0.6rem;
}
.item-meta-row .notes-field { flex: 2 1 240px; }
.item-meta-row .photos-field { flex: 1 1 200px; }
.item-meta-row .remove-field { flex: 0 0 auto; margin-left: auto; }

/* ---------- Dashboard columns ---------- */
.dbd-kanban { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; }
.dbd-col-head {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.95rem;
  color: var(--ink-soft);
  letter-spacing: 0.05em;
  margin-bottom: 0.6rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--line);
}
.dbd-count {
  background: var(--paper-dim);
  border-radius: 999px;
  padding: 0.05rem 0.55rem;
  font-size: 0.78rem;
  margin-left: 0.4rem;
}
.job-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--line);
  border-radius: 8px;
  padding: 0.8rem 0.9rem;
  margin-bottom: 0.7rem;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.1s ease;
}
.job-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.job-card > div:first-child { flex-wrap: wrap; gap: 0.3rem; }
.job-card .job-name { font-weight: 700; overflow-wrap: break-word; min-width: 0; }
.job-card .job-meta { font-size: 0.8rem; color: var(--ink-soft); }
.job-card .job-total { font-family: 'IBM Plex Mono', monospace; font-weight: 600; color: var(--blueprint); }
.empty-col { color: #A6A08F; font-size: 0.85rem; padding: 0.5rem 0; }

/* Left-edge accent by status group — a quick visual scan of the board
   without reading every stamp. Colors reuse the existing palette. */
.job-card.accent-neutral { border-left-color: #A6A08F; }
.job-card.accent-sent { border-left-color: var(--tape); }
.job-card.accent-rejected { border-left-color: var(--safety); }
.job-card.accent-attention { border-left-color: var(--safety); border-left-style: dashed; }
.job-card.accent-progress { border-left-color: var(--blueprint); }
.job-card.accent-completed { border-left-color: var(--ok); }

/* ---------- Totals table ---------- */
.totals-line { display: flex; justify-content: space-between; padding: 0.35rem 0; }
.totals-line.grand {
  border-top: 2px solid var(--ink);
  margin-top: 0.4rem;
  padding-top: 0.6rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 1.5rem;
}

/* ---------- Misc ---------- */
.dbd-toast-wrap { position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: 90; }
.helper { font-size: 0.8rem; color: var(--ink-soft); }
.dropzone {
  border: 1.5px dashed var(--line);
  border-radius: 8px;
  padding: 0.9rem;
  text-align: center;
  color: var(--ink-soft);
  cursor: pointer;
  background: var(--paper-dim);
}
.dropzone:hover { border-color: var(--tape); }
.photo-thumb { width: 60px; height: 60px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); margin: 0.2rem; }

/* ---------- Footer ---------- */
.dbd-footer {
  background: var(--ink);
  color: #AEB8C4;
  padding: 1.75rem 1.25rem;
  margin-top: 2.5rem;
}
.dbd-footer .dbd-footer-inner {
  max-width: 1040px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.dbd-footer a { color: #C9D2DC; }
.dbd-footer a:hover { color: var(--tape); }
.dbd-footer .dbd-footer-links { display: flex; gap: 1.1rem; font-size: 0.85rem; }
.dbd-footer .dbd-footer-fine { font-size: 0.75rem; color: #7C8898; margin-top: 0.6rem; }