/* The admin pages share one stylesheet.
   It was inline in the dashboard while the dashboard was the only admin
   screen. Splitting it into pages without splitting this out would have left
   four copies to keep in step, and the first one to drift is the one nobody
   notices. */

:root {
  --ink: #172033;
  --muted: #64748b;
  --line: #d8e1ea;
  --bg: #f3f5fb;
  --teal: #075f63;
  --blue: #2563eb;
  --panel: #ffffff;
  --shadow: 0 14px 36px rgba(15, 23, 42, 0.1);
}

* {
  box-sizing: border-box;
}

html.auth-checking:not(.local-dev) body {
  visibility: hidden;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 24px;
  background: #123c5a;
  color: #ffffff;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 900;
}

.mark {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--teal);
}

.actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.actions span {
  color: #dbeafe;
  font-size: 13px;
}

button,
.button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  padding: 9px 13px;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  background: #e8eef5;
  color: var(--ink);
}

.button.primary {
  background: #ffffff;
  color: #123c5a;
}

.button.dark {
  background: #123c5a;
  color: #ffffff;
}

.nav-action {
  border: 1px solid var(--line);
}

main {
  width: min(1180px, calc(100% - 32px));
  margin: 28px auto 48px;
  display: grid;
  /* An implicit grid column grows until its widest child fits, so the
     four navigation buttons on one row were dragging the whole page
     wider than the window. Everything below then sat on a page that
     scrolled sideways, which reads as the layout being off-centre.
     Naming the column with a zero minimum lets it shrink instead. */
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
}

.quick-nav {
  display: grid;
  /* Wrap onto a second row rather than squeezing four buttons into a
     width that cannot hold them. */
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}

.quick-nav button,
.quick-nav a {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: var(--shadow);
  color: #123c5a;
  font-weight: 900;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

h1 {
  margin: 0;
  font-size: clamp(30px, 5vw, 48px);
  letter-spacing: 0;
}

p {
  margin: 8px 0 0;
  color: var(--muted);
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.panel {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
  scroll-margin-top: 18px;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.panel.highlight-section {
  border-color: #2563eb;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.16), var(--shadow);
}

.panel h2 {
  margin: 0 0 14px;
}

.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.section-title h2 {
  margin: 0;
}

.assign-grid {
  display: grid;
  /* 1fr refuses to shrink past its content, and four select boxes plus a
     button do not fit a laptop window - the row pushed the page wider
     than the screen. minmax(0, …) lets them narrow, and below 760px the
     media query stacks them anyway. */
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  gap: 12px;
  align-items: end;
}

label {
  display: grid;
  gap: 7px;
  color: #334155;
  font-weight: 900;
}

input,
select {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
}

.assignment-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.assignment-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdff;
}

.assignment-row small {
  display: block;
  color: var(--muted);
  margin-top: 3px;
}

.status-pending {
  background: #fff7ed;
  color: #9a3412;
}

.status-approved {
  background: #e8f4f2;
  color: var(--teal);
}

.card {
  min-height: 200px;
  display: grid;
  align-content: space-between;
  gap: 18px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
  text-align: left;
}

.card strong {
  display: block;
  font-size: 22px;
}

.card span {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  line-height: 1.45;
}

.badge {
  width: fit-content;
  border-radius: 999px;
  padding: 6px 10px;
  background: #e8f4f2;
  color: var(--teal);
  font-weight: 900;
  font-size: 12px;
}

.badge.alert {
  background: #fff7ed;
  color: #9a3412;
}

/* A client whose access runs out this week. Losing one because nobody was
   looking at a date is the failure this colour exists to prevent. */
.warn-text {
  color: #9a3412 !important;
  font-weight: 800;
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0;
}

.stat {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdff;
}

.stat strong {
  display: block;
  font-size: 24px;
}

.stat span {
  color: var(--muted);
  font-weight: 800;
}

.notice-list,
.client-groups {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.client-groups {
  grid-template-columns: 1fr 1fr;
}

.client-group h3 {
  margin: 0 0 10px;
}

.client-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.muted-button {
  background: #f1f5f9;
  color: #334155;
}

.dashboard-message {
  padding: 12px 14px;
  border: 1px solid #b8d9d5;
  border-radius: 8px;
  background: #e8f4f2;
  color: var(--teal);
  font-weight: 900;
}

.dashboard-message.error {
  border-color: #fecaca;
  background: #fef2f2;
  color: #991b1b;
}

@media (max-width: 840px) {
  header,
  .hero {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .grid {
    grid-template-columns: 1fr;
  }

  .quick-nav {
    grid-template-columns: 1fr;
  }

  .assign-grid,
  .stats,
  .client-groups {
    grid-template-columns: 1fr;
  }
}
/* Navigation: real links to real pages, with the current one marked. The
   dashboard used to scroll to headings instead, which is why finding
   approvals meant travelling to the bottom of a single long page. */
.admin-nav { display: flex; gap: 4px; flex-wrap: wrap; }
.nav-link {
  padding: 8px 14px; border-radius: 8px; font-weight: 800; font-size: 14px;
  color: rgba(255, 255, 255, .82); border: 1px solid transparent;
}
.nav-link:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.nav-link.current { background: #ffffff; color: #123c5a; }
@media (max-width: 900px) {
  header { flex-direction: column; align-items: stretch; gap: 10px; }
  .admin-nav { justify-content: flex-start; }
}