/* ============================================================
   style.css – ONE stylesheet for every page of Leave Tracker
   Sections:
   1. Colours and sizes (variables)
   2. Basic page styles
   3. Accessibility helpers (skip link, focus, hidden text)
   4. Header, navigation and footer
   5. Cards, buttons and messages
   6. Forms
   7. Dashboard
   8. Requests table
   9. Responsive layout (media queries)
   ============================================================ */

/* ---------- 1. Colours and sizes ----------
   All colours are checked for WCAG 2.1 AA contrast:
   normal text needs at least 4.5:1, borders/large text at least 3:1. */
:root {
  --color-text: #1f2933; /* 14.8:1 on white */
  --color-text-light: #4b5563; /* 7.6:1 on white – hints and small text */
  --color-background: #f3f5f8; /* page background */
  --color-surface: #ffffff; /* cards */
  --color-border: #6b7280; /* 4.8:1 – borders of inputs (needs 3:1) */
  --color-primary: #1d4ed8; /* 6.7:1 with white text – main buttons and links */
  --color-primary-dark: #1e3a8a;
  --color-header: #1e293b; /* dark header, white text 14.6:1 */
  --color-focus: #ffbf47; /* yellow focus ring on the dark header */
  --color-focus-dark: #0b0c0c; /* black focus ring on light backgrounds */
  --color-error: #b3261e; /* 6.4:1 on white */
  --color-error-light: #fdecea;
  --color-success: #146c2e; /* 6.4:1 on white */
  --color-success-light: #e6f4ea;
  --color-pending: #7a4a00; /* 7.4:1 on its light background */
  --color-pending-light: #fff4ce;

  /* rem = relative to the user's font size, so zoom and text resize work */
  --space-small: 0.5rem;
  --space: 1rem;
  --space-large: 2rem;
  --radius: 0.375rem;
}

/* ---------- 2. Basic page styles ---------- */
*,
*::before,
*::after {
  box-sizing: border-box; /* width includes padding and border */
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-text);
  background-color: var(--color-background);
  /* Footer stays at the bottom even on short pages */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
  padding-top: var(--space-large);
  padding-bottom: var(--space-large);
}

/* Centres the content and stops lines from getting too long */
.container {
  width: 100%;
  max-width: 70rem;
  margin: 0 auto;
  padding-left: var(--space);
  padding-right: var(--space);
}

h1 {
  font-size: 2rem;
  line-height: 1.2;
  margin: 0 0 var(--space);
}

h2 {
  font-size: 1.5rem;
  line-height: 1.25;
  margin: var(--space-large) 0 var(--space);
}

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

a:hover {
  color: var(--color-primary-dark);
}

/* Long words or e-mail addresses wrap instead of causing sideways scrolling */
p,
li,
td,
th {
  overflow-wrap: anywhere;
}

/* ---------- 3. Accessibility helpers ---------- */

/* Visible keyboard focus on EVERY focusable element.
   :focus-visible = only when using the keyboard, not on mouse clicks. */
:focus-visible {
  outline: 3px solid var(--color-focus-dark);
  outline-offset: 3px;
}

/* On the dark header a black ring would not show, so use yellow */
.site-header :focus-visible {
  outline-color: var(--color-focus);
}

/* The <main> element gets focus from the skip link; no ring needed there */
main:focus {
  outline: none;
}

/* Skip link: hidden above the page until it receives keyboard focus */
.skip-link {
  position: absolute;
  top: -10rem;
  left: var(--space);
  z-index: 10;
  padding: var(--space-small) var(--space);
  background-color: var(--color-focus);
  color: var(--color-focus-dark);
  font-weight: bold;
  text-decoration: underline;
}

.skip-link:focus {
  top: var(--space);
}

/* Text that only screen readers can "see" (still read aloud) */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Make sure the "hidden" attribute always wins over display rules below */
[hidden] {
  display: none !important;
}

/* ---------- 4. Header, navigation and footer ---------- */
.site-header {
  background-color: var(--color-header);
  color: #ffffff;
}

/* Flexbox puts logo, menu and user area in one row; wrap = new line if no space */
.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-small) var(--space-large);
  padding-top: var(--space);
  padding-bottom: var(--space);
}

.logo {
  margin: 0;
  font-size: 1.375rem;
  font-weight: bold;
}

.logo a {
  color: #ffffff;
  text-decoration: none;
}

.nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-small);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-list a {
  display: inline-block;
  padding: var(--space-small) 0.75rem;
  color: #ffffff;
  text-decoration: none;
  border-bottom: 3px solid transparent;
}

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

/* The current page is shown by a thick underline AND bold text,
   not by colour alone */
.nav-list a[aria-current="page"] {
  font-weight: bold;
  border-bottom-color: var(--color-focus);
}

.user-area {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-small) var(--space);
}

.user-area p {
  margin: 0;
}

.site-footer {
  background-color: var(--color-header);
  color: #ffffff;
  padding: var(--space) 0;
}

.site-footer p {
  margin: 0;
}

/* ---------- 5. Cards, buttons and messages ---------- */
.card {
  background-color: var(--color-surface);
  border: 1px solid #d1d5db;
  border-radius: var(--radius);
  padding: var(--space);
}

/* One button style used everywhere (consistency) */
.button {
  display: inline-block;
  min-height: 2.75rem; /* big enough to tap on a phone */
  padding: 0.6rem 1.2rem;
  font-family: inherit;
  font-size: 1rem;
  font-weight: bold;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  color: #ffffff;
  background-color: var(--color-primary);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius);
  cursor: pointer;
}

.button:hover {
  color: #ffffff;
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

/* Secondary buttons: white with a blue border */
.button-secondary {
  color: var(--color-primary);
  background-color: #ffffff;
}

.button-secondary:hover {
  color: var(--color-primary-dark);
  background-color: #eef2ff;
}

.button-small {
  min-height: 2.5rem;
  padding: 0.35rem 0.8rem;
  font-size: 0.9375rem;
}

.button-approve {
  background-color: var(--color-success);
  border-color: var(--color-success);
}

.button-approve:hover {
  background-color: #0d4a1f;
  border-color: #0d4a1f;
}

.button-reject {
  background-color: var(--color-error);
  border-color: var(--color-error);
}

.button-reject:hover {
  background-color: #7f1d1d;
  border-color: #7f1d1d;
}

/* A busy button (while saving / signing in) looks faded and shows a waiting cursor */
.button[aria-disabled="true"] {
  opacity: 0.75;
  cursor: wait;
}

/* Status messages (loading, saved, errors) */
.status {
  margin: var(--space) 0;
  font-weight: bold;
}

.status:empty {
  margin: 0;
}

/* Success and error messages have a coloured border AND words like
   "Saved:" or "Error:", so colour is never the only clue */
.status-success {
  padding: 0.75rem var(--space);
  color: var(--color-success);
  background-color: var(--color-success-light);
  border-left: 6px solid var(--color-success);
}

.status-error {
  padding: 0.75rem var(--space);
  color: var(--color-error);
  background-color: var(--color-error-light);
  border-left: 6px solid var(--color-error);
}

/* Status badges in the table and dashboard (text + colour) */
.badge {
  display: inline-block;
  padding: 0.1rem 0.6rem;
  font-size: 0.875rem;
  font-weight: bold;
  border: 1px solid currentColor;
  border-radius: 1rem;
  white-space: nowrap;
}

.badge-pending {
  color: var(--color-pending);
  background-color: var(--color-pending-light);
}

.badge-approved {
  color: var(--color-success);
  background-color: var(--color-success-light);
}

.badge-rejected {
  color: var(--color-error);
  background-color: var(--color-error-light);
}

/* Empty state message */
.empty-state {
  padding: var(--space);
  background-color: var(--color-surface);
  border: 2px dashed var(--color-border);
  border-radius: var(--radius);
}

.empty-state p {
  margin-top: 0;
}

/* ---------- 6. Forms ---------- */
.form-narrow {
  max-width: 28rem;
}

.form-wide {
  max-width: 44rem;
}

.form-group {
  margin-bottom: var(--space);
}

/* Each label sits on its own line above its field */
label {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: bold;
}

input[type="text"],
input[type="password"],
input[type="search"],
input[type="date"],
select,
textarea {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: 2.75rem;
  padding: 0.5rem;
  font-family: inherit;
  font-size: 1rem;
  color: var(--color-text);
  background-color: #ffffff;
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
}

textarea {
  resize: vertical;
}

/* A field with an error: red border, thicker on the left
   (the "Error:" text under it is the main clue, not the colour) */
input.input-error,
select.input-error,
textarea.input-error {
  border-color: var(--color-error);
  border-left-width: 6px;
}

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

.error-text:empty {
  display: none;
}

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

fieldset {
  margin: 0 0 var(--space-large);
  padding: 0;
  border: 0;
  min-width: 0; /* stops wide content from breaking the layout on phones */
}

legend {
  margin-bottom: var(--space-small);
  padding: 0;
  font-size: 1.25rem;
  font-weight: bold;
}

/* Smaller legends for fieldsets inside fieldsets */
.dynamic-section legend,
.inner-fieldset legend {
  font-size: 1rem;
}

/* Dynamic sections are indented with a blue line, so the user sees
   they belong to the answer above them */
.dynamic-section {
  margin: 0 0 var(--space) 0.5rem;
  padding: var(--space-small) 0 var(--space-small) var(--space);
  border-left: 4px solid var(--color-primary);
}

.fieldset-error {
  border-left-color: var(--color-error);
}

.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-small) var(--space-large);
}

/* Radio buttons and checkboxes: box first, label next to it */
.radio-item,
.checkbox-item {
  display: flex;
  align-items: center;
  gap: var(--space-small);
}

.radio-item label,
.checkbox-item label {
  margin: 0;
  font-weight: normal;
}

/* Bigger radio buttons and checkboxes: easier to see and click */
input[type="radio"],
input[type="checkbox"] {
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  accent-color: var(--color-primary);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 var(--space);
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space);
}

/* Error summary box at the top of the form */
.error-summary {
  max-width: 44rem;
  margin-bottom: var(--space-large);
  padding: var(--space);
  background-color: #ffffff;
  border: 4px solid var(--color-error);
  border-radius: var(--radius);
}

.error-summary h2 {
  margin-top: 0;
  color: var(--color-error);
}

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

/* The summary itself gets focus; give it a clear ring too */
.error-summary:focus {
  outline: 3px solid var(--color-focus-dark);
  outline-offset: 3px;
}

/* ---------- 7. Dashboard ---------- */
/* Grid: as many 12rem-wide cards per row as fit the screen */
.summary-list,
.action-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--space);
  margin: 0;
  padding: 0;
  list-style: none;
}

.summary-card {
  display: flex;
  flex-direction: column;
  padding: var(--space);
  background-color: var(--color-surface);
  border: 1px solid #d1d5db;
  border-top: 6px solid var(--color-border);
  border-radius: var(--radius);
}

.summary-pending {
  border-top-color: var(--color-pending);
}

.summary-approved {
  border-top-color: var(--color-success);
}

.summary-rejected {
  border-top-color: var(--color-error);
}

.summary-number {
  font-size: 2.25rem;
  font-weight: bold;
  line-height: 1.1;
}

.summary-label {
  font-weight: bold;
}

/* The whole card is one big link */
.action-card {
  display: block;
  height: 100%;
  padding: var(--space);
  background-color: var(--color-surface);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius);
  text-decoration: none;
}

.action-card:hover {
  background-color: #eef2ff;
}

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

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

.recent-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.recent-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem var(--space);
  padding: 0.75rem var(--space);
  background-color: var(--color-surface);
  border: 1px solid #d1d5db;
  border-radius: var(--radius);
  margin-bottom: var(--space-small);
}

/* ---------- 8. Requests table ---------- */
.filters {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 var(--space);
  margin-bottom: var(--space);
}

.requests-table {
  width: 100%;
  border-collapse: collapse;
  background-color: var(--color-surface);
}

.requests-table caption {
  text-align: left;
  font-weight: bold;
  font-size: 1.25rem;
  padding-bottom: var(--space-small);
}

.requests-table th,
.requests-table td {
  padding: 0.75rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid #d1d5db;
}

.requests-table thead th {
  background-color: #e5e9f0;
  border-bottom: 2px solid var(--color-border);
}

.action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-small);
}

/* Small screens (below 48rem): each row becomes a card, with the
   column name written in front of each value, so there is
   NO sideways scrolling on a phone */
@media (max-width: 47.99rem) {
  .requests-table thead {
    /* Hide the header row visually (screen readers still have it) */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  .requests-table,
  .requests-table tbody,
  .requests-table tr,
  .requests-table th,
  .requests-table td {
    display: block;
  }

  .requests-table caption {
    display: block;
    width: 100%;
  }

  .requests-table tr {
    margin-bottom: var(--space);
    border: 1px solid #d1d5db;
    border-radius: var(--radius);
  }

  .requests-table tbody th,
  .requests-table td {
    display: grid;
    grid-template-columns: 7rem 1fr;
    gap: var(--space-small);
  }

  /* Badges and buttons keep their normal width instead of stretching */
  .requests-table td > * {
    justify-self: start;
  }

  /* Write the column name in front of each value */
  .requests-table tbody th::before,
  .requests-table td::before {
    content: attr(data-label);
    font-weight: bold;
  }

  .requests-table tbody th {
    background-color: #e5e9f0;
  }
}

/* ---------- 9. Responsive layout ---------- */

/* Medium screens and up (40rem ≈ 640px at normal text size) */
@media (min-width: 40rem) {
  .form-row {
    grid-template-columns: 1fr 1fr; /* the two date fields side by side */
  }

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

/* Large screens (64rem ≈ 1024px) */
@media (min-width: 64rem) {
  h1 {
    font-size: 2.5rem;
  }

  /* All filter controls in one row */
  .filters {
    grid-template-columns: 2fr 1fr 1fr 1.5fr auto;
    align-items: end;
  }

  .form-group-button {
    align-self: end;
  }
}

/* Users who ask their computer for less movement get no smooth scrolling */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}