/* ==========================================================================
   DBVDW Dagrapport - shared stylesheet
   Visual language aligned with dbvdwplanning.nl:
   charcoal top bar, orange navigation strip, flat white content panel,
   square corners, Lato typography, orange table headings.

   Layout principles
   -----------------
   1. Nothing has a fixed pixel width. The content column is fluid and only
      capped by --shell-max, so it grows with the viewport instead of sitting
      in a narrow strip on wide screens.
   2. Type, spacing and the shell gutter scale with clamp(), so a phone gets
      tight gutters and readable text while a 1440px+ screen gets air.
   3. Wide data tables never force the page wider than the viewport: they
      scroll inside their own container above 767px and collapse into stacked
      label/value rows below it. That is what stops mobile browsers from
      shrinking (zooming out) the whole page to fit a 6-column table.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Design tokens
   -------------------------------------------------------------------------- */

:root {
  color-scheme: light;

  /* Brand. The orange and charcoal are fixed points of the identity and do
     not change between themes; only the surfaces around them do. */
  --brand-orange: #c26834;
  --brand-orange-dark: #a4522a;
  --brand-orange-soft: #f6e7de;
  --brand-charcoal: #2f2f2f;
  --brand-charcoal-soft: #3d3d3d;

  /* Orange used as text/links needs to stay readable on either surface. */
  --brand-orange-text: #a4522a;
  --brand-action-bg: #9f4a20;
  --brand-action-hover: #7f3817;
  --brand-on-charcoal: #f19a60;

  /* Neutrals */
  --ink: #3a3a3c;
  --ink-muted: #6b6b70;
  --surface: #ffffff;
  --surface-alt: #f7f7f8;
  --page: #e9eaec;
  --line: #dcdcde;
  --line-strong: #c4c4c7;

  /* Status */
  --status-info-bg: #eef2f6;
  --status-info-fg: #37546f;
  --status-warn-bg: #fbeedd;
  --status-warn-fg: #8a5a12;
  --status-ok-bg: #e6f2e7;
  --status-ok-fg: #2c6b31;
  --status-danger-bg: #fbe6e6;
  --status-danger-fg: #a42121;
  --status-accent-bg: #efe9f7;
  --status-accent-fg: #57409c;
  --status-danger-border: #f0c7c7;
  --status-ok-border: #c6e0c8;

  /* Corner watermark */
  --watermark-size: clamp(5rem, 11vw, 9.5rem);
  --watermark-opacity: 0.07;

  /* Shell geometry: the fluid centre column */
  --shell-max: 96rem;
  --shell-gutter: clamp(0.75rem, 3vw, 2.5rem);
  --panel-pad: clamp(1rem, 0.55rem + 1.9vw, 2.25rem);

  /* Fluid type scale */
  --fs-xs: clamp(0.75rem, 0.72rem + 0.12vw, 0.8125rem);
  --fs-sm: clamp(0.8125rem, 0.78rem + 0.16vw, 0.9rem);
  --fs-base: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  --fs-lg: clamp(1.05rem, 0.99rem + 0.28vw, 1.2rem);
  --fs-h2: clamp(1.05rem, 0.97rem + 0.4vw, 1.3rem);
  --fs-h1: clamp(1.375rem, 1.2rem + 0.85vw, 2rem);

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: clamp(1.5rem, 1.1rem + 1.6vw, 2.75rem);

  /* Flat, square-cornered like the planning site */
  --radius: 2px;
  --radius-pill: 999px;
  --shadow: 0 1px 3px rgb(47 47 47 / 12%);
  --shadow-raised: 0 2px 10px rgb(47 47 47 / 14%);

  /* Minimum comfortable touch target */
  --tap: 2.75rem;

  --font-sans: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;

  font-family: var(--font-sans);
  font-size: var(--fs-base);
  color: var(--ink);
  background: var(--page);
}

/* --------------------------------------------------------------------------
   Dark theme

   Two selectors, one palette. `[data-theme="dark"]` is the explicit choice the
   user made with the toggle; the media query covers "follow my system" (the
   default, when no choice has been stored). `:not([data-theme="light"])` stops
   the media query from overriding someone who deliberately picked light.

   The two blocks are deliberate duplicates: a media query cannot be folded
   into a selector list, so changing one means changing the other.
   -------------------------------------------------------------------------- */

:root[data-theme="dark"] {
  color-scheme: dark;

  --brand-orange-text: #ffad73;

  --ink: #f5f7fa;
  --ink-muted: #c8cdd5;
  --page: #101114;
  --surface: #1b1d21;
  --surface-alt: #30343c;
  --surface-hover: #39404a;
  --line: #4a515c;
  --line-strong: #727b89;

  --status-info-bg: #1f3444;
  --status-info-fg: #b8ddff;
  --status-warn-bg: #493716;
  --status-warn-fg: #ffd28a;
  --status-ok-bg: #1f3a27;
  --status-ok-fg: #b4e6bc;
  --status-danger-bg: #482323;
  --status-danger-fg: #ffb7b7;
  --status-accent-bg: #352b4b;
  --status-accent-fg: #d8c5ff;
  --status-danger-border: #8c4d4d;
  --status-ok-border: #52745a;

  --watermark-opacity: 0.1;

  --shadow: 0 4px 18px rgb(0 0 0 / 38%);
  --shadow-raised: 0 8px 28px rgb(0 0 0 / 55%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --brand-orange-text: #ffad73;

    --ink: #f5f7fa;
    --ink-muted: #c8cdd5;
    --page: #101114;
    --surface: #1b1d21;
    --surface-alt: #30343c;
    --surface-hover: #39404a;
    --line: #4a515c;
    --line-strong: #727b89;

    --status-info-bg: #1f3444;
    --status-info-fg: #b8ddff;
    --status-warn-bg: #493716;
    --status-warn-fg: #ffd28a;
    --status-ok-bg: #1f3a27;
    --status-ok-fg: #b4e6bc;
    --status-danger-bg: #482323;
    --status-danger-fg: #ffb7b7;
    --status-accent-bg: #352b4b;
    --status-accent-fg: #d8c5ff;
    --status-danger-border: #8c4d4d;
    --status-ok-border: #52745a;

    --watermark-opacity: 0.1;

    --shadow: 0 4px 18px rgb(0 0 0 / 38%);
    --shadow-raised: 0 8px 28px rgb(0 0 0 / 55%);
  }
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%; /* stop iOS inflating text in landscape */
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--ink);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
}

img,
svg,
video,
canvas {
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3 {
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-h1);
  margin: 0 0 var(--space-4);
}

h2 {
  font-size: var(--fs-h2);
  margin: 0 0 var(--space-3);
}

h3 {
  font-size: var(--fs-lg);
  margin: 0 0 var(--space-2);
}

p {
  margin: 0 0 var(--space-3);
}

a {
  color: var(--brand-orange-text);
}

/* --------------------------------------------------------------------------
   Corner watermark

   dbvdwplanning.nl pins its wordmark to the bottom-left of the viewport with
   background-attachment: fixed, so it stays put while the page scrolls past.
   Same idea here, as its own fixed element so opacity can differ per theme.
   It sits behind everything and never takes a click.
   -------------------------------------------------------------------------- */

.app-watermark {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 0;
  width: var(--watermark-size);
  height: var(--watermark-size);
  opacity: var(--watermark-opacity);
  pointer-events: none;
  user-select: none;
}

/* Content scrolls over the watermark, never under it. */
.app-header,
.app-nav,
.app-main,
body.auth-page main {
  position: relative;
  z-index: 1;
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 2px solid var(--brand-orange);
  outline-offset: 2px;
}

.app-nav a:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -4px;
  box-shadow: inset 0 0 0 2px var(--brand-charcoal);
}

.table-scroll:focus-visible {
  outline: 3px solid var(--brand-orange-text);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   App shell: charcoal header + orange nav strip + fluid content column
   -------------------------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--shell-gutter);
}

.app-header {
  background: var(--brand-charcoal);
  color: #fff;
}

/* Three fixed zones - email, brand, actions - at every width. The email and
   brand both use fluid (clamp-based) sizing so the row keeps fitting as the
   viewport narrows, rather than jumping between two hand-tuned layouts at a
   breakpoint. Requires shell-user and app-header__meta to be direct children
   of .shell, siblings of .app-brand, not nested inside one another. */
.app-header .shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2);
  min-height: 3.25rem;
  padding-block: var(--space-2);
}

.app-brand {
  grid-column: 2;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 900;
  letter-spacing: 0.01em;
  font-size: var(--fs-sm);
  color: var(--brand-on-charcoal);
  text-decoration: none;
  border: 2px solid var(--brand-on-charcoal);
  padding: 0.2rem 0.55rem;
  line-height: 1.2;
  white-space: nowrap;
}

.app-brand:hover {
  color: #fff;
  border-color: #fff;
}

.app-header__user {
  grid-column: 1;
  justify-self: start;
  min-width: 0;
  max-width: clamp(4.5rem, 4vw + 3rem, 16rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-sm);
  color: #d6d6d8;
}

.app-header__meta {
  grid-column: 3;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

/* --------------------------------------------------------------------------
   Icon-only square buttons in the header: theme toggle and logout. Same
   footprint, so they line up, but the logout button keeps the ordinary
   .secondary colours while the toggle is a plain ghost button.
   -------------------------------------------------------------------------- */

.icon-btn {
  flex: 0 0 auto;
  width: var(--tap);
  min-height: var(--tap);
  padding: 0;
  gap: 0;
}

.icon-btn svg {
  width: 1.1rem;
  height: 1.1rem;
  flex: 0 0 auto;
}

.app-header .icon-btn.secondary {
  color: #fff;
  background: transparent;
  border-color: #5a5a5c;
}

.app-header .icon-btn.secondary:hover {
  color: #fff;
  background: var(--brand-charcoal-soft);
  border-color: var(--brand-orange);
}

/* --------------------------------------------------------------------------
   Theme toggle

   Icon-only square button. The two glyphs are stacked and swapped by the
   resolved theme, so the button always shows the mode you would switch to.
   -------------------------------------------------------------------------- */

.theme-toggle {
  font-size: 1.1rem;
  line-height: 1;
  color: #fff;
  background: transparent;
  border: 1px solid #5a5a5c;
}

.theme-toggle:hover {
  color: #fff;
  background: var(--brand-charcoal-soft);
  border-color: var(--brand-orange);
}

.theme-toggle .theme-toggle__dark {
  display: none;
}

:root[data-theme="dark"] .theme-toggle .theme-toggle__light {
  display: none;
}

:root[data-theme="dark"] .theme-toggle .theme-toggle__dark {
  display: inline;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .theme-toggle__light {
    display: none;
  }

  :root:not([data-theme="light"]) .theme-toggle .theme-toggle__dark {
    display: inline;
  }
}

/* On the auth screens there is no charcoal header bar, so the toggle floats
   over the page background and takes the page's own colours. */
body.auth-page .theme-toggle {
  position: fixed;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 2;
  color: var(--ink);
  background: var(--surface);
  border-color: var(--line-strong);
}

body.auth-page .theme-toggle:hover {
  color: var(--ink);
  background: var(--surface-alt);
  border-color: var(--brand-orange);
}

.app-nav {
  background: var(--brand-action-bg);
}

.app-nav .shell {
  display: flex;
  align-items: stretch;
  gap: clamp(0.25rem, 1.5vw, 1.25rem);
  overflow-x: auto;
  scrollbar-width: none;
}

.app-nav .shell::-webkit-scrollbar {
  display: none;
}

.app-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 var(--space-3);
  color: #fff;
  font-size: var(--fs-sm);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
}

.app-nav a:hover {
  background: var(--brand-action-hover);
}

.app-nav a[aria-current="page"] {
  border-bottom-color: #fff;
  font-weight: 700;
}

/* The content column. Grows with the viewport, capped by --shell-max. */
.app-main {
  flex: 1;
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding: var(--shell-gutter) var(--shell-gutter) var(--space-7);
}

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  padding: var(--panel-pad);
}

/* --------------------------------------------------------------------------
   Auth screens (login, invite, consent): narrow centred card
   -------------------------------------------------------------------------- */

body.auth-page {
  justify-content: center;
  align-items: center;
  background: var(--page);
  padding: var(--shell-gutter);
}

body.auth-page main {
  width: 100%;
  max-width: 26rem;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-raised);
  padding: clamp(1.25rem, 4vw, 2.25rem);
}

/* Forms with several fields (invite) get a little more room. */
body.auth-page main.auth-wide {
  max-width: 34rem;
}

body.auth-page .auth-brand {
  display: block;
  text-align: center;
  font-weight: 900;
  font-size: var(--fs-lg);
  color: var(--brand-orange);
  border: 2px solid var(--brand-orange);
  padding: 0.35rem 0.5rem;
  margin-bottom: var(--space-5);
}

/* A submit button that ends an auth form spans the card. */
body.auth-page form > button {
  width: 100%;
  margin-top: var(--space-5);
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

label {
  display: block;
  margin-top: var(--space-4);
  margin-bottom: var(--space-1);
  font-weight: 700;
  font-size: var(--fs-sm);
}

input,
select,
textarea {
  display: block;
  width: 100%;
  min-height: var(--tap);
  padding: 0.55rem 0.65rem;
  font-family: inherit;
  /* 16px minimum keeps iOS from zooming the viewport on focus */
  font-size: max(1rem, var(--fs-base));
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--brand-orange);
  outline: none;
  box-shadow: 0 0 0 2px var(--brand-orange-soft);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

button,
a.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap);
  padding: 0.5rem 1.1rem;
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  color: #fff;
  background: var(--brand-action-bg);
  border: 1px solid var(--brand-action-bg);
  border-radius: var(--radius);
  cursor: pointer;
}

button:hover,
a.btn:hover {
  background: var(--brand-action-hover);
  border-color: var(--brand-action-hover);
  color: #fff;
}

button.secondary,
a.btn.secondary {
  color: var(--ink);
  background: var(--surface);
  border-color: var(--line-strong);
}

button.secondary:hover,
a.btn.secondary:hover {
  background: var(--surface-alt);
  border-color: var(--brand-orange);
  color: var(--ink);
}

button:disabled {
  cursor: wait;
  opacity: 0.6;
}

/* Action rows wrap instead of squeezing buttons off screen. */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

/* Natural width on desktop; full width once stacked (see the 767px block). */
.actions button,
.actions a.btn {
  flex: 0 1 auto;
}

.actions.top-actions {
  margin-top: 0;
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--line);
}

.back-btn {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  margin-bottom: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--brand-orange-text);
  text-decoration: none;
}

.back-btn:hover {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Text helpers
   -------------------------------------------------------------------------- */

.muted {
  color: var(--ink-muted);
  overflow-wrap: anywhere;
}

.error {
  color: var(--status-danger-fg);
}

.section {
  margin-bottom: var(--space-7);
}

.section > h2 {
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--brand-orange);
}

.report-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--line);
}

.report-header h1 {
  margin-bottom: var(--space-2);
}

/* --------------------------------------------------------------------------
   Status pills and badges
   -------------------------------------------------------------------------- */

.report-status,
.badge {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius);
  font-size: var(--fs-xs);
  font-weight: 700;
  white-space: nowrap;
}

.status-draft,
.badge-in_progress {
  background: var(--status-info-bg);
  color: var(--status-info-fg);
}

.status-submitted {
  background: var(--status-warn-bg);
  color: var(--status-warn-fg);
}

.status-approved,
.badge-completed {
  background: var(--status-ok-bg);
  color: var(--status-ok-fg);
}

.badge-wp {
  background: var(--status-accent-bg);
  color: var(--status-accent-fg);
}

/* --------------------------------------------------------------------------
   Report cards (home list)
   -------------------------------------------------------------------------- */

.reports-list {
  margin-top: var(--space-5);
  display: grid;
  gap: var(--space-3);
}

.report-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand-orange);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.report-card:hover {
  background: var(--line);
  border-color: var(--line-strong);
  border-left-color: var(--brand-orange-dark);
}

.report-card-info {
  min-width: 0;
}

.report-card h3 {
  margin: 0 0 var(--space-1);
  font-size: var(--fs-lg);
}

.report-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  font-size: var(--fs-sm);
  color: var(--ink-muted);
}

.download-pdf-card-btn {
  flex: 0 0 auto;
  min-height: 2.25rem;
  padding: 0.35rem 0.75rem;
  font-size: var(--fs-xs);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Data tables
   -------------------------------------------------------------------------- */

/* Wrapper injected by responsive-tables.js. Keeps a wide table inside the
   content column instead of stretching the document. */
.table-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.data-table th,
.data-table td {
  padding: 0.55rem 0.65rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}

.data-table thead th {
  color: var(--brand-orange-text);
  font-weight: 700;
  white-space: nowrap;
  background: transparent;
  border-bottom: 2px solid var(--brand-orange-text);
}

.data-table tbody tr:nth-child(even) > td {
  background: var(--surface-alt);
}

.empty-state {
  padding: var(--space-5) !important;
  text-align: center;
  color: var(--ink-muted);
  background: var(--surface-alt) !important;
}

/* Standalone "nothing here yet" panel, e.g. a coming-soon page. Not a table
   cell, so it does not need .empty-state's !important overrides. */
.placeholder-panel {
  padding: var(--space-7) var(--space-4);
  text-align: center;
  color: var(--ink-muted);
  background: var(--surface-alt);
  border-radius: var(--radius);
}

.placeholder-panel h2 {
  border: 0;
  padding: 0;
  margin: 0 0 var(--space-2);
  color: var(--ink);
}

.placeholder-panel p {
  margin: 0;
}

.asset-preview-img {
  width: 4.5rem;
  height: 3.375rem;
  object-fit: cover;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
}

/* Nested work-assignment detail row */
.work-assignment-details-row > td {
  background: var(--surface-alt) !important;
  border-bottom: 2px solid var(--line-strong);
  padding: 0 !important;
}

.work-personnel-container {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px dashed var(--line-strong);
}

.work-sub-title {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-1);
}

.work-personnel-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.personnel-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.15rem 0.6rem;
  font-size: var(--fs-xs);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
}

.work-photos-container {
  padding: var(--space-2) var(--space-3);
}

/* Auto-fit grid: thumbnails reflow instead of overflowing on narrow screens */
.work-photos-flex {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr));
  gap: var(--space-2);
}

.work-photo-thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  transition: transform 0.15s ease;
}

.work-photo-thumb:hover {
  transform: scale(1.04);
}

/* --------------------------------------------------------------------------
   Page states
   -------------------------------------------------------------------------- */

#loading,
#error {
  padding: var(--space-6);
  text-align: center;
}

#error {
  color: var(--status-danger-fg);
  background: var(--status-danger-bg);
  border: 1px solid var(--status-danger-border);
  border-radius: var(--radius);
}

.refresh-indicator {
  margin-top: var(--space-4);
  font-size: var(--fs-xs);
  color: var(--ink-muted);
}

/* Invite form: stacked fields, inline result banner */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.field label {
  margin-top: 0;
}

#invite-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-5);
}

#denied {
  padding: var(--space-6);
  text-align: center;
  color: var(--status-danger-fg);
  background: var(--status-danger-bg);
  border: 1px solid var(--status-danger-border);
  border-radius: var(--radius);
}

#status {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
}

#status.success {
  color: var(--status-ok-fg);
  background: var(--status-ok-bg);
  border: 1px solid var(--status-ok-border);
}

#status.error {
  color: var(--status-danger-fg);
  background: var(--status-danger-bg);
  border: 1px solid var(--status-danger-border);
}

/* --------------------------------------------------------------------------
   Mobile: collapse data tables into stacked label/value rows.
   Below this width a 4-6 column table cannot fit, and forcing it to is what
   made the whole page render zoomed out.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .data-table,
  .data-table tbody,
  .data-table tr,
  .data-table td {
    display: block;
    width: 100%;
  }

  .data-table thead {
    /* Visually hidden, still announced to screen readers via data-label */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .data-table tbody tr {
    margin-bottom: var(--space-3);
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 3px solid var(--brand-orange);
  }

  .data-table tbody tr:nth-child(even) > td {
    background: transparent;
  }

  .data-table td {
    display: grid;
    grid-template-columns: minmax(6rem, 38%) 1fr;
    gap: var(--space-3);
    align-items: start;
    padding: 0.45rem var(--space-3);
    border-bottom: 1px solid var(--line);
    overflow-wrap: anywhere;
  }

  .data-table tr > td:last-child {
    border-bottom: 0;
  }

  .data-table td::before {
    content: attr(data-label);
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--brand-orange-text);
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }

  /* Cells with no label (nested detail rows, empty states) span full width */
  .data-table td:not([data-label]),
  .data-table td.empty-state,
  .work-assignment-details-row > td {
    display: block;
  }

  .data-table td.empty-state {
    padding: var(--space-4) !important;
  }

  .work-assignment-details-row {
    border-left-color: var(--line-strong) !important;
  }

  .actions button,
  .actions a.btn {
    flex: 1 1 100%;
  }
}

:root[data-theme="dark"] .app-header,
:root[data-theme="dark"] .app-nav,
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] body.auth-page main,
:root[data-theme="dark"] .report-card,
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea {
  border-color: var(--line-strong);
}

:root[data-theme="dark"] .report-card:hover {
  background: var(--surface-hover);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .app-header,
  :root:not([data-theme="light"]) .app-nav,
  :root:not([data-theme="light"]) .panel,
  :root:not([data-theme="light"]) body.auth-page main,
  :root:not([data-theme="light"]) .report-card,
  :root:not([data-theme="light"]) input,
  :root:not([data-theme="light"]) select,
  :root:not([data-theme="light"]) textarea {
    border-color: var(--line-strong);
  }

  :root:not([data-theme="light"]) .report-card:hover {
    background: var(--surface-hover);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}