/* Colours come from the theme (theming/themes.py): base.html defines --color-<role> and
   --use-<part>. These names are what the rules below use; tints and hover shades are
   mixed here so every theme gets matching ones. */
:root {
  --page-bg: var(--use-page-bg);
  --text: var(--use-text);
  --muted: var(--use-text-muted);
  --heading: var(--use-heading);
  --link: var(--use-link);
  --brand: var(--use-banner-bg);
  --brand-text: var(--use-banner-text);
  --nav-bg: var(--use-sidenav-bg);
  --nav-text: var(--use-sidenav-text);
  --nav-muted: var(--use-sidenav-muted);
  --nav-accent: var(--use-sidenav-active);
  --nav-hover: color-mix(in srgb, var(--nav-accent) 7%, var(--nav-bg));
  --nav-active: color-mix(in srgb, var(--nav-accent) 13%, var(--nav-bg));
  --border: color-mix(in srgb, var(--use-divider) 35%, var(--page-bg));
  --input-border: var(--use-input-border);
  --input-bg: var(--use-input-bg);
  --menu-text: var(--use-topmenu-text);
  --menu-active: var(--use-topmenu-active);
  --menu-border: color-mix(in srgb, var(--use-topmenu-border) 35%, var(--page-bg));
  --th-bg: var(--use-table-header-bg);
  --th-text: var(--use-table-header-text);
  --btn-bg: var(--use-button-bg);
  --btn-text: var(--use-button-text);
  --btn-hover: color-mix(in srgb, var(--btn-bg) 82%, black);
  --btn2-bg: var(--use-button-secondary-bg);
  --btn2-text: var(--use-button-secondary-text);
  --disabled: var(--use-disabled);
  --focus: var(--use-focus-ring);
  --ok: var(--use-msg-success);
  --ok-bg: color-mix(in srgb, var(--ok) 13%, var(--page-bg));
  --warn: var(--use-msg-warning);
  --warn-bg: color-mix(in srgb, var(--warn) 15%, var(--page-bg));
  --warn-soft: color-mix(in srgb, var(--warn) 7%, var(--page-bg));
  --err: var(--use-msg-error);
  --err-bg: color-mix(in srgb, var(--err) 10%, var(--page-bg));
  --err-strong-bg: color-mix(in srgb, var(--err) 20%, var(--page-bg));
  --info: var(--use-msg-info);
  --info-bg: color-mix(in srgb, var(--info) 11%, var(--page-bg));
  --panel-accent: var(--use-panel-accent);
  --panel-bg: color-mix(in srgb, var(--panel-accent) 7%, var(--page-bg));
  --panel-border: color-mix(in srgb, var(--panel-accent) 22%, var(--page-bg));
  --badge-new: var(--use-badge-new);
  --badge-progress: var(--use-badge-progress);
  --badge-text: var(--use-button-text);
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

body {
  display: flex;
  min-height: 100vh;
  background: var(--page-bg);
  color: var(--text);
  font-family: var(--font-body);
}
h1, h2, h3 { font-family: var(--font-heading); color: var(--heading); }
.client a { color: var(--link); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Side navigation */
.sidenav {
  flex: 0 0 220px;
  display: flex;
  flex-direction: column;
  background: var(--nav-bg);
  color: var(--nav-text);
  border-right: 1px solid var(--border);
}

/* Signed-in user / log in, pinned to the bottom of the sidenav */
.account {
  margin-top: auto;
  padding: .9rem 1.25rem;
  border-top: 1px solid var(--border);
  font-size: .9em;
}
.account-email { display: block; margin-bottom: .25rem; overflow-wrap: anywhere; color: var(--nav-muted); }
.account form { margin: 0; }
.sidenav .account a:not(.banner) { padding: 0; border: 0; display: inline; color: var(--link); font-weight: 600; }
.sidenav .account a:not(.banner):hover { background: none; text-decoration: underline; }
button.link { padding: 0; background: none; color: var(--link); font-weight: 600; }
button.link:hover { background: none; text-decoration: underline; }

/* Login pages */
.login { display: grid; gap: .6rem; max-width: 24rem; justify-items: start; margin-top: 1rem; }
.login p { margin: 0; }
.login label { font-weight: 600; }
.login input[type=email], .login input[type=text], .login input[type=password] {
  width: 100%;
  padding: .55rem .7rem;
  border: 1px solid var(--input-border);
  border-radius: 4px;
  font: inherit;
}
.login .errorlist { margin: 0; padding: 0; list-style: none; color: var(--err); }
.login .hint a { color: var(--link); }

.banner {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  background: var(--brand);
  color: var(--brand-text);
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: .15em;
  padding-left: .15em; /* balances the trailing letter-spacing so the text stays centred */
  text-decoration: none;
}

.sidenav ul { list-style: none; margin: 0; padding: .5rem 0; }
.sidenav ul ul { padding: 0; }

.sidenav a:not(.banner) {
  display: block;
  padding: .6rem 1.25rem;
  border-left: 3px solid transparent;
  color: inherit;
  text-decoration: none;
}
.sidenav ul ul a:not(.banner) { padding-left: 2.25rem; font-size: .95em; }
.sidenav a:not(.banner):hover { background: var(--nav-hover); }
.sidenav a[aria-current="page"] {
  background: var(--nav-active);
  border-left-color: var(--nav-accent);
  font-weight: 600;
}

/* Client area */
.client { flex: 1; min-width: 0; padding: 2rem; }
.client h1 { margin: 0; font-size: 1.5rem; font-weight: 600; }

@media (max-width: 640px) {
  body { flex-direction: column; }
  .sidenav { flex-basis: auto; border-right: 0; border-bottom: 1px solid var(--border); }
  .account { margin-top: 0; display: flex; align-items: baseline; gap: .75rem; }
  .account-email { margin: 0; flex: 1; min-width: 0; }
  .client { padding: 1.25rem 1rem; }
}

/* Banner menu across the top of a tool */
.menubar {
  display: flex;
  gap: .25rem;
  margin: 1rem 0 1.5rem;
  border-bottom: 1px solid var(--menu-border);
}
.menubar a {
  padding: .6rem 1rem;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  color: var(--menu-text);
  text-decoration: none;
}
.menubar a:hover { background: var(--nav-hover); }
.menubar a[aria-current="page"] { border-bottom-color: var(--menu-active); color: var(--menu-active); font-weight: 600; }

/* Forms */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.upload { display: grid; gap: .75rem; max-width: 40rem; justify-items: start; }

/* Timesheet upload tools: drop zone + camera */
.upload-tools { display: flex; flex-wrap: wrap; gap: .75rem; width: 100%; }
.dropzone {
  flex: 1 1 18rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  min-height: 9rem;
  padding: 1.25rem;
  border: 2px dashed var(--input-border);
  border-radius: 8px;
  background: var(--nav-bg);
  text-align: center;
  cursor: pointer;
}
.dropzone:hover, .dropzone.dragover { border-color: var(--nav-accent); background: var(--nav-active); }
.dropzone:focus-within, .camera:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.dropzone-title { font-weight: 600; }
.dropzone-sub { font-size: .9em; color: var(--muted); }
.camera {
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .9rem 1.25rem;
  border-radius: 8px;
  background: var(--btn-bg);
  color: var(--btn-text);
  font-weight: 600;
  cursor: pointer;
}
.camera svg { width: 1.4rem; height: 1.4rem; fill: currentColor; }

/* Phones and tablets get the camera; mouse/trackpad devices get drag and drop */
.only-touch { display: none; }
@media (hover: none), (pointer: coarse) {
  .only-pointer { display: none; }
  .only-touch { display: inline; }
  .dropzone { min-height: 5rem; }
}
@media (hover: hover) and (pointer: fine) {
  .camera { display: none; }
}

.pending { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: .4rem; }
.pending li {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .4rem .6rem;
  border: 1px solid var(--border);
  border-radius: 6px;
}
.pending img { width: 2.5rem; height: 2.5rem; object-fit: cover; border-radius: 4px; }
.pending span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pending .remove {
  padding: .1rem .55rem;
  background: transparent;
  color: var(--text);
  font-size: 1.2rem;
  line-height: 1;
}
.pending .remove:hover { background: var(--nav-hover); }
.upload .hint { margin: 0; font-size: .9em; color: var(--muted); }
.upload .errorlist { margin: 0; padding: .6rem .9rem; list-style: none; background: var(--err-bg); color: var(--err); border-radius: 4px; }
button {
  padding: .5rem 1.25rem;
  border: 0;
  border-radius: 4px;
  background: var(--btn-bg);
  color: var(--btn-text);
  font: inherit;
  cursor: pointer;
}
button:hover { background: var(--btn-hover); }
button:disabled { background: var(--disabled); cursor: not-allowed; }

/* Messages */
.messages { list-style: none; margin: 0 0 1.25rem; padding: 0; }
.messages li { padding: .6rem .9rem; border-radius: 4px; background: var(--ok-bg); overflow-wrap: anywhere; }
.messages li.info { background: var(--info-bg); }
.messages li.error { background: var(--err-bg); color: var(--err); }
.messages li.warning { background: var(--warn-bg); color: var(--warn); }

/* Data tables */
.totals { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1rem 0 .5rem; }
.totals div { padding: .75rem 1rem; border: 1px solid var(--border); border-radius: 6px; min-width: 10rem; }
.totals dt { font-size: .85em; color: var(--muted); }
.totals dd { margin: .2rem 0 0; font-size: 1.3rem; font-weight: 600; }
.totals small { font-size: .7em; font-weight: 400; color: var(--muted); }
.table-wrap { overflow-x: auto; margin-top: 1rem; }
table.data { border-collapse: collapse; width: 100%; font-size: .9em; }
table.data th, table.data td { padding: .45rem .6rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
table.data th { background: var(--th-bg); color: var(--th-text); font-weight: 600; white-space: nowrap; }
table.data .num { text-align: right; font-variant-numeric: tabular-nums; }
table.data .nowrap { white-space: nowrap; }
table.data .bad { color: var(--err); font-weight: 600; }
.pager { display: flex; gap: 1rem; margin-top: 1rem; align-items: baseline; }
.pager a { color: var(--link); font-weight: 600; }

/* Timesheet review */
.filters { margin: 0 0 .5rem; }
.filters a { color: inherit; }
.filters a[aria-current="page"] { font-weight: 600; color: var(--link); }
.status { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .85em; background: var(--nav-bg); white-space: nowrap; }
.status-review { background: var(--warn-bg); color: var(--warn); }
.status-approved { background: var(--ok-bg); color: var(--ok); }
.status-failed { background: var(--err-bg); color: var(--err); }
.bad-text { color: var(--err); font-weight: 600; }
.status-manual { background: var(--info-bg); color: var(--info); }
td.actions { white-space: nowrap; }
td.actions form { display: inline; margin-left: .5rem; }
td.actions a { color: var(--link); font-weight: 600; margin-left: .5rem; }

.review-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .75rem 1.25rem; margin-bottom: 1rem; }
.review-head > a { color: var(--link); }
.page-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.page-chips a { padding: .2rem .65rem; border: 1px solid var(--border); border-radius: 999px; color: inherit; text-decoration: none; font-size: .9em; }
.page-chips a.done { background: var(--ok-bg); }
.page-chips a[aria-current="page"] { border-color: var(--menu-active); font-weight: 600; }

.review { display: grid; grid-template-columns: minmax(260px, 4fr) 8fr; gap: 1.25rem; align-items: start; }
.review-image { position: sticky; top: 1rem; }
.review-image img { width: 100%; height: auto; border: 1px solid var(--border); border-radius: 4px; cursor: zoom-in; }
.review-form { min-width: 0; }
.header-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: .5rem .75rem; border: 0; padding: 0; margin: 0 0 .5rem; }
.header-fields label { display: grid; gap: .2rem; font-size: .85em; color: var(--muted); }
.review-form input[type=text], .review-form input[type=date], .review-form input[type=time], .review-form input[type=number] {
  width: 100%; min-width: 0; padding: .3rem .4rem; border: 1px solid var(--input-border); border-radius: 4px; font: inherit; color: var(--text); background: var(--input-bg);
}
.review-form input:disabled { background: var(--nav-bg); color: var(--text); }
table.entries { font-size: .85em; }
table.entries th, table.entries td { padding: .3rem .35rem; vertical-align: middle; }
table.entries input[type=number] { width: 3.2rem; }
table.entries input[type=time] { width: 7.4rem; }
table.entries input[type=date] { width: 8.6rem; }
table.entries input[name$='-worker'] { min-width: 8.5rem; }
table.entries td.check { text-align: center; }
table.entries td.written { color: var(--muted); font-size: .9em; }
table.entries tfoot td { font-weight: 600; border-bottom: 0; }
tr.row-check > td { background: var(--warn-soft); }
tr.row-error > td { background: var(--err-bg); }
tr.row-excluded > td { opacity: .55; }
tr.row-new > td { background: var(--nav-bg); }
tr.row-notes > td { padding-top: 0; }
.flag { display: inline-block; margin: 0 .35rem .25rem 0; padding: .1rem .45rem; border-radius: 4px; font-size: .82em; background: var(--warn-bg); color: var(--warn); }
.flag.bad { background: var(--err-strong-bg); color: var(--err); font-weight: 600; }
.banner-ok, .banner-bad { margin: 0 0 .75rem; padding: .6rem .9rem; border-radius: 4px; }
.banner-ok { background: var(--ok-bg); }
.banner-bad { background: var(--err-bg); color: var(--err); }
.review-actions { display: flex; gap: .75rem; justify-content: flex-end; margin-top: 1rem; }
button.secondary { background: var(--btn2-bg); color: var(--btn2-text); border: 1px solid var(--btn2-text); }
button.secondary:hover { background: var(--nav-hover); }

@media (max-width: 1000px) {
  .review { grid-template-columns: 1fr; }
  .review-image { position: static; max-width: 40rem; }
}
.banner-bad a, .banner-ok a { color: inherit; font-weight: 600; }

/* Settings */
.settings-section { max-width: 46rem; margin-top: 1rem; padding: 1.25rem 1.5rem; background: var(--panel-bg); border: 1px solid var(--panel-border); border-left: 4px solid var(--panel-accent); border-radius: 8px; }
.settings-section h2 { margin: 0 0 .25rem; font-size: 1.15rem; }
.settings-section h3 { margin: 1.25rem 0 .5rem; font-size: 1rem; }
.settings-section > .status { margin: .25rem 0 .75rem; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem 1rem; }
.settings-grid .wide { grid-column: 1 / -1; }
.settings-section label { display: grid; gap: .25rem; font-weight: 600; font-size: .9em; }
.settings-section label .hint { font-weight: 400; }
.settings-section input, .settings-section select {
  width: 100%; min-width: 0; padding: .45rem .6rem; border: 1px solid var(--input-border); border-radius: 4px; font: inherit; font-weight: 400; background: var(--input-bg); color: var(--text);
}
.settings-section .preset { max-width: 22rem; }
.settings-actions { display: flex; flex-wrap: wrap; align-items: end; gap: .75rem; margin-top: 1rem; }
.settings-actions.test label { flex: 1 1 16rem; }
.settings-section .errorlist { margin: 0; padding: 0; list-style: none; color: var(--err); font-weight: 400; }
@media (max-width: 640px) {
  .settings-section { padding: 1rem; }
  .settings-grid { grid-template-columns: 1fr; }
}

/* Reports */
.report-filter { display: flex; flex-wrap: wrap; align-items: end; gap: .6rem 1rem; margin: 1rem 0 .5rem; }
.report-filter label { display: grid; gap: .2rem; font-size: .85em; color: var(--muted); }
.report-filter input, .report-filter select { padding: .4rem .5rem; border: 1px solid var(--input-border); border-radius: 4px; font: inherit; color: var(--text); background: var(--input-bg); }
.report-filter .download { color: var(--link); font-weight: 600; align-self: center; }
table.job-hours summary { cursor: pointer; font-weight: 600; }
table.job-hours table.workers { margin: .35rem 0 .25rem 1rem; border-collapse: collapse; font-size: .92em; }
table.job-hours table.workers td { border: 0; padding: .15rem .6rem .15rem 0; }
table.job-hours tfoot td { font-weight: 600; border-top: 2px solid var(--border); }
table.job-hours tr.section-row td { background: var(--nav-bg); font-weight: 600; font-size: .9em; color: var(--muted); }
table.job-hours table.workers td { white-space: nowrap; }
.report-h2 { font-size: 1.05rem; margin: 1.5rem 0 .25rem; }

/* Sidenav badges */
.badge { display: inline-block; margin-left: .35rem; padding: .05rem .45rem; border-radius: 999px; background: var(--badge-new); color: var(--badge-text); font-size: .72em; font-weight: 700; letter-spacing: .02em; vertical-align: .1em; }
.badge[hidden] { display: none; }
.badge-progress { background: var(--badge-progress); font-variant-numeric: tabular-nums; }

/* Customers */
.customer-form { max-width: 46rem; margin-top: 1rem; }
.customer-form label { display: grid; gap: .25rem; font-weight: 600; font-size: .9em; }
.customer-form input, .customer-form textarea {
  width: 100%; min-width: 0; padding: .45rem .6rem; border: 1px solid var(--input-border); border-radius: 4px; font: inherit; font-weight: 400; background: var(--input-bg); color: var(--text);
}
.crawl-row { display: flex; gap: .75rem; align-items: end; margin-bottom: .25rem; }
.crawl-row label { flex: 1; }
.customer-form .settings-grid { margin-top: .75rem; }

/* Theme picker (superusers) and theme editor */
.theme-picker { margin-top: .6rem; }
.theme-picker label { display: flex; align-items: center; gap: .4rem; color: var(--nav-muted); }
.theme-picker select { flex: 1; min-width: 0; padding: .2rem .3rem; border: 1px solid var(--input-border); border-radius: 4px; background: var(--input-bg); color: var(--text); font: inherit; }
.editor-colors { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem; }
.editor-color { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--input-bg); }
.editor-swatch { height: 3.25rem; display: flex; align-items: end; padding: .4rem .6rem; }
.editor-swatch span { background: var(--page-bg); color: var(--text); padding: .05rem .4rem; border-radius: 4px; font-size: .8em; font-weight: 600; }
.editor-meta { padding: .4rem .6rem 0; }
.editor-meta p { margin: .2rem 0 0; }
.editor-uses { list-style: none; margin: 0; padding: .4rem .6rem .6rem; display: grid; gap: .45rem; }
.editor-uses label { display: block; font-size: .85em; margin-bottom: .15rem; }
.editor-uses select { width: 100%; padding: .25rem .3rem; border: 1px solid var(--input-border); border-radius: 4px; background: var(--input-bg); color: var(--text); font: inherit; }