/*
 * Leave Desk - styles.css
 * ----------------------------------------------------------------------
 * One stylesheet for every page, written mobile-first:
 * the base rules suit a small phone and the media queries near the end
 * add the wider layouts. Sizes use rem/em so the page follows the user's
 * browser text size and reflows at 200% zoom.
 *
 * Contents
 *   1. Colours and base
 *   2. Focus and skip link
 *   3. Header, navigation and footer
 *   4. Buttons
 *   5. Forms and error messages
 *   6. Status and feedback messages
 *   7. Dashboard
 *   8. Table, filters and pagination
 *   9. Wider screens
 */

/* ---------- 1. Colours and base ---------- */

/* Every colour pair below meets WCAG 2.1 AA contrast (checked with axe-core). */
:root {
  --navy: #1f3a5f;        /* header, buttons: 11.5:1 with white */
  --navy-dark: #152941;
  --text: #1a1a1a;        /* body text: 17.4:1 on white */
  --text-soft: #4a5560;   /* hints: 7.6:1 on white */
  --link: #1f4e8c;        /* links: 8.3:1 on white */
  --border: #5f6b7a;      /* input borders: 5.4:1 on white */
  --line: #d5dae0;        /* decorative dividers only */
  --page: #f5f7fa;
  --white: #ffffff;
  --error: #b00020;       /* error text: 7.3:1 on white */
  --error-bg: #fdecee;
  --success: #1b5e20;     /* success text: 7.0:1 on its background */
  --success-bg: #e8f5e9;
  --warning: #6b4a00;     /* pending text: 7.4:1 on its background */
  --warning-bg: #fff4d6;
  --focus: #ffd54f;
}

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

/* The hidden attribute must always win over display rules below. */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text);
  background: var(--page);
}

main {
  flex: 1;
  width: 100%;
  max-width: 70rem;
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
}

/* Narrower column for forms: shorter lines are easier to scan. */
main.narrow {
  max-width: 40rem;
}

h1 {
  margin: 0 0 0.5rem;
  font-size: 1.75rem;
  line-height: 1.2;
}

h2 {
  margin: 2rem 0 0.75rem;
  font-size: 1.25rem;
  line-height: 1.3;
}

p {
  margin: 0 0 1rem;
}

a {
  color: var(--link);
}

/* ---------- 2. Focus and skip link ---------- */

/*
 * One focus style for every interactive element. The dark outline shows
 * on light backgrounds and the yellow ring shows on the dark header, so
 * focus is visible everywhere.
 */
:focus-visible {
  outline: 0.1875rem solid var(--text);
  outline-offset: 0;
  box-shadow: 0 0 0 0.375rem var(--focus);
}

/* The skip link stays off screen until it receives keyboard focus. */
.skip-link {
  position: absolute;
  left: 0.5rem;
  top: -5rem;
  z-index: 10;
  padding: 0.5rem 1rem;
  background: var(--white);
  color: var(--text);
  font-weight: 700;
}

.skip-link:focus {
  top: 0.5rem;
}

/* ---------- 3. Header, navigation and footer ---------- */

.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
  padding: 0.75rem 1rem;
  background: var(--navy);
  color: var(--white);
}

.site-header p {
  margin: 0;
}

.site-name {
  font-size: 1.25rem;
  font-weight: 700;
}

.nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-list a {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: 0.25rem;
  color: var(--white);
  text-decoration: none;
}

.nav-list a:hover {
  text-decoration: underline;
}

/* The current page is marked by a white panel and bold text, not colour alone. */
.nav-list a[aria-current="page"] {
  background: var(--white);
  color: var(--navy);
  font-weight: 700;
}

.user-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
}

.site-footer {
  padding: 1rem;
  border-top: 0.0625rem solid var(--line);
  background: var(--white);
  color: var(--text-soft);
  font-size: 0.875rem;
  text-align: center;
}

.site-footer p {
  margin: 0;
}

/* ---------- 4. Buttons ---------- */

.button {
  display: inline-block;
  min-height: 2.75rem; /* 44px touch target */
  padding: 0.5rem 1.25rem;
  border: 0.125rem solid var(--navy);
  border-radius: 0.25rem;
  background: var(--navy);
  color: var(--white);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.button:hover {
  background: var(--navy-dark);
  border-color: var(--navy-dark);
}

/* White button with a navy outline (pagination). */
.button-secondary {
  background: var(--white);
  color: var(--navy);
}

.button-secondary:hover {
  background: var(--page);
}

/* White button for use on the navy header. */
.button-light {
  min-height: 2.25rem;
  padding: 0.25rem 0.75rem;
  border-color: var(--white);
  background: var(--white);
  color: var(--navy);
}

.button-light:hover {
  background: var(--page);
  border-color: var(--page);
}

/* Disabled buttons (Previous on the first page, Next on the last). */
.button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Busy buttons keep full contrast because their label is still read. */
.button[aria-disabled="true"] {
  cursor: progress;
}

/* ---------- 5. Forms and error messages ---------- */

fieldset {
  margin: 0 0 1.5rem;
  padding: 1rem;
  border: 0.0625rem solid var(--line);
  border-radius: 0.5rem;
  background: var(--white);
}

legend {
  padding: 0 0.5rem;
  font-size: 1.125rem;
  font-weight: 700;
}

/* The group of radio buttons inside "Leave details". */
fieldset.choices {
  margin-bottom: 1rem;
  padding: 0;
  border: 0;
}

fieldset.choices legend {
  padding: 0;
  margin-bottom: 0.25rem;
  font-size: 1rem;
}

.field {
  margin-bottom: 1rem;
}

label {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 700;
}

.hint {
  margin: 0 0 0.25rem;
  color: var(--text-soft);
}

input[type="text"],
input[type="password"],
input[type="search"],
input[type="date"],
select,
textarea {
  display: block;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  border: 0.125rem solid var(--border);
  border-radius: 0.25rem;
  background: var(--white);
  color: var(--text);
  font: inherit;
}

.input-short {
  max-width: 12rem;
}

/* Radio buttons and checkboxes: control and label side by side. */
.choice {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.5rem;
}

.choice input {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  accent-color: var(--navy);
}

.choice label {
  margin: 0;
  font-weight: 400;
}

/* Space between a checkbox and the field it reveals. */
.choice + .field {
  margin-top: 0.75rem;
}

/* Fields with an error get a thicker red border as well as the message. */
.field [aria-invalid="true"] {
  border-color: var(--error);
  border-width: 0.25rem;
}

.field-error {
  margin: 0.25rem 0 0;
  color: var(--error);
  font-weight: 700;
}

.error-summary {
  margin-bottom: 1.5rem;
  padding: 1rem;
  border: 0.25rem solid var(--error);
  border-radius: 0.25rem;
  background: var(--white);
}

.error-summary h2 {
  margin-top: 0;
}

.error-summary ul {
  margin: 0;
  padding-left: 1.25rem;
}

.error-summary a {
  color: var(--error);
  font-weight: 700;
}

/* Demo sign-in details shown on the page (recognition over recall). */
.hint-box {
  margin-top: 1.5rem;
  padding: 0.75rem 1rem;
  border-left: 0.25rem solid var(--navy);
  background: var(--white);
}

/* ---------- 6. Status and feedback messages ---------- */

.status-text {
  margin: 0.75rem 0;
}

/* An empty status region stays in the page (so later messages are
   announced) but takes up no space. */
.status-text:empty {
  margin: 0;
}

.success-message {
  margin-bottom: 1.5rem;
  padding: 0.75rem 1rem;
  border: 0.125rem solid var(--success);
  border-radius: 0.25rem;
  background: var(--success-bg);
  color: var(--success);
  font-weight: 700;
}

.success-message a {
  color: var(--success);
}

.empty-state {
  padding: 2rem 1rem;
  border: 0.125rem dashed var(--border);
  border-radius: 0.5rem;
  background: var(--white);
  text-align: center;
}

/* ---------- 7. Dashboard ---------- */

.summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1rem;
  margin: 0;
}

.summary-item {
  display: flex;
  flex-direction: column-reverse; /* number above its label */
  padding: 1rem;
  border: 0.0625rem solid var(--line);
  border-radius: 0.5rem;
  background: var(--white);
}

.summary-item dt {
  color: var(--text-soft);
}

.summary-item dd {
  margin: 0;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
}

.action-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.action-card {
  display: block;
  height: 100%;
  padding: 1rem;
  border: 0.125rem solid var(--navy);
  border-radius: 0.5rem;
  background: var(--white);
  text-decoration: none;
}

.action-card:hover {
  background: var(--page);
}

.action-title {
  display: block;
  font-size: 1.125rem;
  font-weight: 700;
  text-decoration: underline;
}

.action-text {
  display: block;
  color: var(--text);
}

/* ---------- 8. Table, filters and pagination ---------- */

.filters {
  display: grid;
  gap: 0 1rem;
  margin-top: 1rem;
}

.filters .field {
  margin-bottom: 0.5rem;
}

table {
  width: 100%;
  border-collapse: collapse;
}

caption {
  padding: 0.5rem 0;
  color: var(--text-soft);
  text-align: left;
}

th,
td {
  text-align: left;
  font-weight: 400;
}

tbody th {
  font-weight: 700;
}

/* Column headings are real buttons, so they work with the keyboard. */
.sort-button {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.sort-button:hover {
  text-decoration: underline;
}

/* Status labels: the word carries the meaning, the colour supports it. */
.status {
  display: inline-block;
  padding: 0.125rem 0.625rem;
  border: 0.0625rem solid currentColor;
  border-radius: 1rem;
  font-size: 0.875rem;
  font-weight: 700;
}

.status-pending {
  background: var(--warning-bg);
  color: var(--warning);
}

.status-approved {
  background: var(--success-bg);
  color: var(--success);
}

.status-rejected {
  background: var(--error-bg);
  color: var(--error);
}

/*
 * Phone layout for the table: each row becomes a card and each cell is
 * shown as "label: value", so there is no sideways scrolling. The label
 * text comes from the data-label attribute set in requests.js.
 */
@media (max-width: 47.99em) {
  /* Column headings (and their sort buttons) stay available to assistive
     technology and the keyboard but are laid out as a wrapping row. */
  thead tr {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 0.75rem;
  }

  thead th {
    display: block;
  }

  .sort-button {
    width: auto;
    border: 0.0625rem solid var(--border);
    border-radius: 0.25rem;
    background: var(--white);
  }

  tbody,
  tbody tr,
  tbody th,
  tbody td {
    display: block;
  }

  tbody tr {
    margin-bottom: 0.75rem;
    padding: 0.75rem 1rem;
    border: 0.0625rem solid var(--line);
    border-radius: 0.5rem;
    background: var(--white);
  }

  tbody th {
    margin-bottom: 0.25rem;
    font-size: 1.125rem;
  }

  tbody td {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.5rem;
    padding: 0.125rem 0;
  }

  tbody td::before {
    content: attr(data-label) ":";
    color: var(--text-soft);
  }
}

.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 1rem;
}

.pagination p {
  margin: 0;
}

/* ---------- 9. Wider screens ---------- */

@media (min-width: 30em) {
  /* Start and end date sit side by side. */
  .field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1rem;
  }

  /* Search box and status filter sit side by side. */
  .filters {
    grid-template-columns: 2fr 1fr;
  }
}

@media (min-width: 48em) {
  main {
    padding: 2rem 1.5rem 3rem;
  }

  h1 {
    font-size: 2rem;
  }

  .site-header {
    padding: 0.75rem 1.5rem;
  }

  /* Push the signed-in box to the right-hand side of the header. */
  .user-box {
    margin-left: auto;
  }

  /* Normal table layout. */
  table {
    border: 0.0625rem solid var(--line);
    background: var(--white);
  }

  thead {
    border-bottom: 0.125rem solid var(--border);
  }

  tbody tr {
    border-top: 0.0625rem solid var(--line);
  }

  tbody tr:nth-child(even) {
    background: var(--page);
  }

  tbody th,
  tbody td {
    padding: 0.625rem 0.75rem;
  }

  caption {
    padding: 0.5rem 0.75rem;
    border: 0.0625rem solid var(--line);
    border-bottom: 0;
    background: var(--white);
  }
}