/* AFL Hub. Mobile first. The look follows the YTB top bar, cards and chips. */
:root {
  --bar: #e8eef7;
  --text: #2c3a49;
  --muted: #55626f;
  --line: #d9dfe7;
  --green: #0b8a68;
  --green-dark: #08704f;
  --blue: #0f4c81;
  --orange: #c9600c;
  --purple: #5b2a86;
  --red: #c62828;
  --grey: #6b7785;
  --white: #ffffff;
  --radius: 6px;
}

/* Inter, free under the SIL Open Font License. See static/fonts. */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--white);
  color: var(--text);
  font: 400 1rem/1.5 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

h1 { font-size: 1.6rem; line-height: 1.25; margin: 0 0 1rem; }
h2 { font-size: 1.15rem; margin: 1.5rem 0 0.75rem; }
a { color: var(--blue); }
code { font-size: 0.95rem; overflow-wrap: anywhere; }
.muted { color: var(--muted); }
.icon { display: block; }

.env-banner {
  background: #fff3cd;
  color: #5c4400;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 2px 16px;
  text-align: center;
}

/* Top bar: logo and tools on one row, the menu on its own row on a phone. */
.topbar {
  background: var(--bar);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  padding: 8px 12px 0;
}
.topbar-brand { display: block; line-height: 0; }
.topbar-brand img { border-radius: 8px; }
.topbar-tools {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  align-items: center;
}
.topbar-tools > a { color: #6e7b88; }
.topbar-nav {
  display: flex;
  grid-column: 1 / -1;
  grid-row: 2;
  justify-content: space-between;
  margin-top: 4px;
  gap: 2px;
}
.topbar-nav a {
  color: #6e7b88;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  font-size: 0.6rem;
  font-weight: 600;
  min-width: 0;
  padding: 6px 0 8px;
  text-decoration: none;
  text-transform: uppercase;
  border-bottom: 3px solid transparent;
}
.topbar-nav a, .topbar-tools > a, .avatar, .button { transition: color 0.12s, background-color 0.12s; }
.topbar-nav a:hover, .topbar-tools > a:hover { color: #0d1720; }
.topbar-tools .avatar:hover { background: #0d1720; }
.topbar-nav a.active { color: var(--text); }
.topbar-nav a.active:hover { color: #0d1720; }

.avatar {
  align-items: center;
  background: var(--text);
  border-radius: 50%;
  color: var(--white);
  cursor: pointer;
  display: inline-flex;
  flex: none;
  font-size: 0.85rem;
  font-weight: 700;
  height: 38px;
  justify-content: center;
  list-style: none;
  width: 38px;
}
.avatar::-webkit-details-marker { display: none; }

/* Drop-down menus, used for the avatar and for Actions. */
.menu { position: relative; }
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu-panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(30, 45, 60, 0.15);
  margin-top: 6px;
  min-width: 220px;
  padding: 6px 0;
  position: absolute;
  z-index: 20;
}
.menu-right { right: 0; }
.menu-panel a,
.menu-panel button {
  background: none;
  border: 0;
  color: var(--text);
  cursor: pointer;
  display: block;
  font: inherit;
  padding: 8px 14px;
  text-align: left;
  text-decoration: none;
  width: 100%;
}
.menu-panel a:hover,
.menu-panel button:hover { background: var(--bar); }

.page { margin: 0 auto; max-width: 1040px; padding: 20px 16px 48px; }

/* Buttons */
.button {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  cursor: pointer;
  display: inline-block;
  font: inherit;
  font-weight: 600;
  min-height: 42px;
  padding: 8px 16px;
  text-align: center;
  text-decoration: none;
}
.button:hover { background: #d5dfec; }
.button-green { background: var(--green); border-color: var(--green); color: var(--white); }
.button-green:hover { background: var(--green-dark); }
.button-wide { display: block; width: 100%; }
.button-link {
  background: none;
  border: 0;
  color: var(--blue);
  cursor: pointer;
  font: inherit;
  margin-top: 12px;
  padding: 4px 0;
  text-decoration: underline;
}

/* Forms */
.field { margin-bottom: 1rem; }
.field label,
.field-label { display: block; font-weight: 600; margin: 0 0 4px; }
.field p { margin: 0; }
.help { color: var(--muted); font-size: 0.88rem; margin: 0 0 6px; }
.help ul { margin: 4px 0; padding-left: 18px; }
input[type="text"], input[type="email"], input[type="password"], input[type="url"], input[type="tel"], input[type="date"], input[type="datetime-local"], select {
  background: var(--white);
  border: 1px solid #aeb7c2;
  border-radius: var(--radius);
  color: var(--text);
  font: inherit;
  min-height: 44px;
  padding: 8px 12px;
  width: 100%;
}
input[type="file"] { display: block; font: inherit; max-width: 100%; padding: 6px 0; }
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 3px solid #7aa7d9;
  outline-offset: 1px;
}
.field-error, .form-error { color: var(--red); font-weight: 600; }
.form-error ul { list-style: none; margin: 0 0 1rem; padding: 0; }
.field div[id] > div { margin-bottom: 4px; }
.field div[id] label { font-weight: 400; }

.message { border-radius: var(--radius); margin: 0 0 1rem; padding: 10px 14px; }
.message-success { background: #dff3ec; color: #075c41; }
.message-info { background: var(--bar); }
.message-error { background: #fbe4e4; color: var(--red); }

/* Cards */
.card { border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 16px; }
.card > h2 { margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.card-title { align-items: center; display: flex; gap: 8px; }
.card-row { border-top: 1px solid var(--line); margin: 0; padding: 12px 16px; }
.card > h2 + .card-row, .card > .card-row:first-child { border-top: 0; }
.card-row form { margin-top: 8px; }
.activity ul { list-style: none; margin: 0; padding: 0; }
.activity li { border-top: 1px solid var(--line); font-size: 0.92rem; padding: 10px 16px; }
.activity li:first-child { border-top: 0; }
.activity strong { font-weight: 600; }
.activity > p { margin: 0; padding: 12px 16px; }

/* Status chips: colour means status, everywhere. */
.chips { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 20px; }
.chip-label { color: var(--muted); display: block; font-size: 0.8rem; }
.chip { display: inline-block; font-weight: 700; }
.chip-green { color: var(--green); }
.chip-grey { color: var(--grey); }
.chip-owner { color: var(--blue); }
.chip-admin { color: var(--purple); }
.chip-field { color: var(--orange); }

/* Home */
.home-head { align-items: center; display: flex; gap: 16px; margin-bottom: 20px; }
.home-head h1 { margin: 0; }
.home-logo { max-height: 64px; max-width: 140px; object-fit: contain; }
.home-cards, .home-today { display: grid; gap: 16px; }
.home-cards .card { margin: 0; }
.home-today .card { margin: 0; }
.light-heading { font-size: 1.25rem; font-weight: 400; margin: 28px 0 10px; }

/* Settings */
.settings { display: grid; gap: 16px; }
.settings-menu { display: flex; flex-wrap: wrap; gap: 4px; }
.settings-heading { color: var(--muted); flex-basis: 100%; font-size: 0.85rem; margin: 0; }
.settings-menu a {
  border-radius: var(--radius);
  color: var(--text);
  padding: 8px 12px;
  text-decoration: none;
}
.settings-menu a:hover { background: var(--bar); }
.settings-menu a.active { background: var(--bar); font-weight: 700; }
.settings-body { min-width: 0; }

/* Lists and records */
.list-head, .record-head {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 16px;
}
.list-head h1, .record-head h1 { margin: 0; }
.record-card {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  display: flex;
  gap: 12px;
  margin-bottom: 10px;
  padding: 12px 16px;
  text-decoration: none;
}
.record-card:hover { background: #f6f8fb; }
.record-card-off { opacity: 0.65; }
.record-card-main { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.record-columns { display: grid; gap: 16px; min-width: 0; }
.rights { list-style: none; margin: 0; padding: 0; }
.rights li { border-top: 1px solid var(--line); padding: 8px 16px; }
.rights li:first-child { border-top: 0; }
.right-mark { display: inline-block; font-weight: 700; width: 2.2em; }
.right-yes .right-mark { color: var(--green); }
.right-no { color: var(--muted); }

.logo-preview { display: block; margin-bottom: 8px; max-height: 96px; max-width: 240px; object-fit: contain; }
.badge-row { align-items: center; display: flex; flex-wrap: wrap; gap: 12px; }
.badge-row form { margin: 0 0 0 auto; }
.badge-preview { height: 48px; max-width: 96px; object-fit: contain; }

/* Sign-in and other pages before the app proper */
.public { background: var(--bar); min-height: 100vh; }
.public-card {
  background: var(--white);
  border-radius: 8px;
  margin: 16px;
  padding: 24px 20px;
}
.public-brand { align-items: center; display: flex; font-size: 1.3rem; font-weight: 700; gap: 12px; margin-bottom: 20px; }
.public-brand img { border-radius: 10px; }
.steps { padding-left: 20px; }
.qr { margin: 12px 0; }
.qr svg { display: block; height: auto; margin: 0 auto; max-width: 300px; width: 100%; }
.key-box { margin-bottom: 16px; }
.key-box code { display: block; margin-top: 6px; }
.codes { column-gap: 16px; columns: 1; list-style: none; margin: 0 0 16px; padding: 0; }
.codes li { padding: 3px 0; }
.link-box { background: var(--bar); border-radius: var(--radius); padding: 12px; }

@media (min-width: 480px) {
  .topbar-nav a { font-size: 0.68rem; }
  .public-card { margin: 48px auto; max-width: 440px; padding: 32px; }
  .codes { columns: 2; }
}

@media (min-width: 720px) {
  .topbar-nav a { font-size: 0.75rem; }
  .home-cards { grid-template-columns: repeat(3, 1fr); }
  .home-today { grid-template-columns: 5fr 3fr; }
  .settings { grid-template-columns: 200px minmax(0, 1fr); gap: 24px; }
  .settings-menu { align-content: flex-start; flex-direction: column; flex-wrap: nowrap; }
  .settings-heading { flex-basis: auto; }
  .record-columns { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (min-width: 960px) {
  /* The YTB layout: one bar with the menu centred. */
  .topbar { grid-template-columns: 1fr auto 1fr; padding: 8px 24px 0; }
  .topbar-nav { grid-column: 2; grid-row: 1; gap: 8px; margin-top: 0; overflow: visible; }
  .topbar-nav a { min-width: 84px; }
  .topbar-tools { gap: 18px; }
}

@media (min-width: 1200px) {
  /* Full-size screens: the same generous sizes as the YTB bar and writing. */
  html { font-size: 22px; }
  h1 { font-size: 1.8rem; }
  .topbar { padding: 14px 24px 6px; }
  .topbar-brand img { height: 52px; width: 52px; }
  .topbar-nav { gap: 36px; }
  .topbar-nav a { font-size: 0.84rem; font-weight: 700; gap: 6px; min-width: 120px; padding: 0 0 6px; }
  .topbar .icon { height: 42px; width: 42px; }
  .topbar-tools { gap: 30px; }
  .topbar-tools .avatar { font-size: 1rem; height: 56px; width: 56px; }
  .page { max-width: 1300px; padding-top: 36px; }
  .settings { grid-template-columns: 280px minmax(0, 1fr); }
  /* Home fills the screen like the YTB home page. Forms stay a readable width. */
  .page-wide { max-width: 1542px; padding-top: 60px; }
  .page-wide h1 { font-size: 1.8rem; font-weight: 600; }
  .home-head { gap: 28px; margin-bottom: 44px; }
  .home-logo { max-height: 100px; max-width: 210px; }
  .home-cards { gap: 27px; }
  .home-today { gap: 27px; }
  .page-wide .card > h2 { font-size: 1.15rem; font-weight: 600; padding: 18px 27px; }
  .page-wide .card-title .icon { height: 32px; width: 32px; }
  .page-wide .card-row { padding: 20px 27px; }
  .light-heading { font-size: 1.35rem; margin: 56px 0 18px; }
}

/* Customers */
.headlines { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 14px; }
.headline { color: var(--blue); padding: 2px 0; text-decoration: none; border-bottom: 2px solid transparent; }
.headline:hover { color: #0d1720; }
.headline-on { border-bottom-color: var(--blue); font-weight: 700; }
.search-bar { display: flex; gap: 8px; margin-bottom: 16px; }
.search-bar input[type="search"] {
  background: var(--white); border: 1px solid #aeb7c2; border-radius: 22px; color: var(--text);
  flex: 1; font: inherit; min-height: 44px; min-width: 0; padding: 8px 18px;
}
.customer-card { align-items: flex-start; }
.chip-stack { align-items: flex-end; display: flex; flex: none; flex-direction: column; font-size: 0.85rem; gap: 2px; text-align: right; }
.chip-red { color: var(--red); }
.pager { align-items: center; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 16px; }
.site-head { align-items: center; display: flex; gap: 12px; justify-content: space-between; }
.contact-row { align-items: flex-start; display: flex; gap: 12px; justify-content: space-between; overflow-wrap: anywhere; }
.contact-row .button { flex: none; }
textarea, input[type="number"] {
  background: var(--white); border: 1px solid #aeb7c2; border-radius: var(--radius); color: var(--text);
  font: inherit; padding: 8px 12px; width: 100%;
}
input[type="number"] { min-height: 44px; }
input[type="checkbox"] { height: 20px; width: 20px; }
.narrow-form { max-width: 760px; }

/* Leads: buttons side by side, and a form that sits in a row. */
.button-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.button-row form { margin: 0; }
.pasted-email > summary { align-items: baseline; cursor: pointer; display: flex; gap: 8px; list-style: none; padding: 12px 16px; }
.pasted-email > summary::-webkit-details-marker { display: none; }
.pasted-email > summary::before { content: "\25B8"; color: #6e7b88; }
.pasted-email[open] > summary::before { content: "\25BE"; }
.pasted-email[open] > summary { border-bottom: 1px solid var(--line); }
.pasted-email summary h2 { display: inline; font-size: inherit; margin: 0; }
.pasted-email pre.card-row { border-top: 0; }
.pasted-email pre { font: inherit; font-size: 0.9rem; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.list-head .button-row { justify-content: flex-end; }

/* Leads report tables: they scroll sideways on a phone rather than squashing. */
.table-wrap { overflow-x: auto; }
.report-table { border-collapse: collapse; font-size: 0.85rem; min-width: 100%; }
.report-table th, .report-table td { border-top: 1px solid var(--line); padding: 8px 12px; text-align: right; white-space: nowrap; }
.report-table thead th { border-top: 0; color: #6e7b88; font-weight: 600; }
.report-table th[scope="row"], .report-table thead th:first-child { text-align: left; }
.report-table tfoot th, .report-table tfoot td { font-weight: 700; }

/* Tenders: the go/no-go questions, and long Dropbox paths that must wrap. */
.go-question { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px 12px; }
.go-question legend { font-weight: 600; padding: 0 4px; }
.radio-row { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 4px 0 8px; }
.radio-row label { align-items: center; display: inline-flex; gap: 6px; font-weight: 400; }
.folder-path { font-size: 0.85rem; overflow-wrap: anywhere; }

/* Nine items on the top bar: on a narrow phone it scrolls sideways rather than squashing. */
@media (max-width: 479px) {
  .topbar-nav { overflow-x: auto; scrollbar-width: none; }
  .topbar-nav a { flex: 0 0 auto; min-width: 52px; padding-left: 4px; padding-right: 4px; }
}
.price-lines th[scope="row"] { white-space: normal; min-width: 220px; font-weight: 400; }
.line-left-out { opacity: 0.55; }
.email-text { font: inherit; font-size: 0.9rem; margin-top: 6px; width: 100%; border: 1px solid #aeb7c2; border-radius: var(--radius); padding: 8px 12px; }
.qualifications { margin: 6px 0 0; padding-left: 1.4rem; }
.qualifications li { margin-bottom: 4px; }
.report-table td.cell-left { text-align: left; }

/* Jobs: the tab bar across the top of a job, like YTB. It scrolls sideways on a phone. */
.job-tabs { border-bottom: 1px solid var(--line); display: flex; gap: 4px; margin: 0 0 16px; overflow-x: auto; scrollbar-width: none; }
.job-tabs a { border-bottom: 3px solid transparent; color: #6e7b88; flex: 0 0 auto; font-size: 0.9rem; font-weight: 600; padding: 8px 12px; text-decoration: none; }
.job-tabs a:hover { color: var(--text); }
.job-tabs a.tab-on { border-bottom-color: var(--text); color: var(--text); }
.todo-row { align-items: flex-start; display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: space-between; }
.todo-main { flex: 1 1 260px; }
.todo-done .todo-main strong { color: #6e7b88; text-decoration: line-through; }
.todo-input { flex: 1 1 220px; }
.todo-check { align-items: center; display: inline-flex; gap: 6px; font-weight: 400; }
.todo-preview { margin: 0; padding-left: 1.2rem; }

[hidden] { display: none !important; }