/* ================================================================
   PLAN HEAVEN — MASTER STYLESHEET
   Version 1.3  |  February 2026
   
   Structure
   ---------
   1.  Google Fonts import
   2.  Design tokens (CSS custom properties)
   3.  Reset & base
   4.  Typography
   5.  Layout — page shell & sticky footer
   6.  Navigation bar
   7.  Page heading
   8.  Buttons
   9.  Panels
   10. Table / list rows
   11. Urgency indicators
   12. Action bars & footer bar
   13. Site footer
   14. Form inputs & search bar
   15. Sortable column headers
   16. List toolbar (record count + rows-per-page)
   17. Pagination
   18. Data tables (tabular reports)
   19. Zebra striping (opt-in)
   20. Form layout
   ================================================================ */


/* ================================================================
   1. GOOGLE FONTS
   DM Sans — regular, medium, semibold, bold + italic variants
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');


/* ================================================================
   2. DESIGN TOKENS
   All decisions live here. Change a value once, it updates
   everywhere. Never hard-code hex values in component rules.
   ================================================================ */

:root {

  /* ------------------------------------------------------------
     TYPOGRAPHY
     Scale: Major Third (×1.25 ratio), base 16px
     ------------------------------------------------------------ */

  --font-base: 'DM Sans', sans-serif;

  /* Size scale */
  --text-caption: 0.640rem;   /* 10.24px — finest fine print          */
  --text-small:   0.800rem;   /* 12.8px  — captions, labels, metadata */
  --text-body:    1.000rem;   /* 16px    — base                       */
  --text-h6:      0.800rem;   /* 12.8px  — small section label        */
  --text-h5:      1.000rem;   /* 16px    — minor heading              */
  --text-h4:      1.250rem;   /* 20px                                 */
  --text-h3:      1.563rem;   /* 25px                                 */
  --text-h2:      1.953rem;   /* 31.25px                              */
  --text-h1:      2.441rem;   /* 39px                                 */

  /* Font weights */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Letter spacing */
  --tracking-normal: 0;
  --tracking-h6:    -0.005em;
  --tracking-h5:    -0.010em;
  --tracking-h4:    -0.015em;
  --tracking-h3:    -0.015em;
  --tracking-h2:    -0.018em;
  --tracking-h1:    -0.020em;

  /* Line heights */
  --leading-body: 1.50;
  --leading-h6:   1.45;
  --leading-h5:   1.40;
  --leading-h4:   1.35;
  --leading-h3:   1.30;
  --leading-h2:   1.20;
  --leading-h1:   1.00;


  /* ------------------------------------------------------------
     COLOUR SYSTEM
     Evolved from Foundation 5. Primary blue unchanged.
     Key structural change: page bg is tinted, panels are white.
     ------------------------------------------------------------ */

  /* Primary action — unchanged from Foundation */
  --color-primary:       #008CBA;
  --color-primary-dark:  #007095;   /* hover / border */
  --color-primary-text:  #FFFFFF;

  /* Page background
     Warm near-white. Lighter than the old panel grey (#F6F6F6)
     so the white panel reads as intentionally elevated. */
  --color-page-bg:       #F9F9F7;

  /* Panel — the clean anchor. White with a soft shadow. */
  --color-panel-bg:      #FFFFFF;
  --color-panel-border:  #E2E2DF;
  --color-panel-shadow:  rgba(0, 0, 0, 0.05);

  /* Table / list header row */
  --color-header-bg:     #008CBA;
  --color-header-text:   #FFFFFF;

  /* Table / list row dividers and hover */
  --color-row-border:    #EEEEEC;
  --color-row-hover:     #F7F7F5;

  /* Text */
  --color-text-primary:  #2C2C2C;   /* slightly softer than Foundation's #333333 */
  --color-text-muted:    #767676;   /* accessible muted — passes AA on white      */
  --color-text-heading:  #1E4A5C;   /* dark teal derived from primary blue        */

  /* Navigation bar
     Lightened from Foundation's #333333 to reduce contrast
     with the warm page background. */
  --color-nav-bg:        #4A4A4A;
  --color-nav-text:      #FFFFFF;
  --color-nav-muted:     #BBBBBB;   /* logged-in / logout text */

  /* Semantic colours — unchanged from Foundation */
  --color-success:        #43AC6A;
  --color-success-dark:   #368a55;
  --color-alert:          #f04124;
  --color-alert-dark:     #cf2a0e;
  --color-warning:        #f08a24;
  --color-warning-dark:   #cf6e0e;

  /* Urgency indicators */
  --color-urgency-high:       #b34000;   /* text colour */
  --color-urgency-high-dot:   #e05b00;   /* dot colour  */
  --color-urgency-low:        #767676;   /* same as muted text */
  --color-urgency-low-dot:    #AAAAAA;

  /* Borders & dividers */
  --color-border:         #E2E2DF;   /* general border — same as panel border */
  --color-divider:        #EEEEEC;   /* lighter — row dividers inside panels  */
}


/* ================================================================
   3. RESET & BASE
   ================================================================ */

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

html {
  font-size: 16px;   /* establishes the rem base */
}

body {
  font-family: var(--font-base);
  font-size:   var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  color:       var(--color-text-primary);
  background-color: var(--color-page-bg);
  -webkit-font-smoothing: antialiased;

  /* Sticky footer pattern */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}


/* ================================================================
   4. TYPOGRAPHY
   ================================================================ */

h1 {
  font-size:      var(--text-h1);
  font-weight:    var(--weight-bold);
  letter-spacing: var(--tracking-h1);
  line-height:    var(--leading-h1);
}

h2 {
  font-size:      var(--text-h2);
  font-weight:    var(--weight-bold);
  letter-spacing: var(--tracking-h2);
  line-height:    var(--leading-h2);
}

h3 {
  font-size:      var(--text-h3);
  font-weight:    var(--weight-semibold);
  letter-spacing: var(--tracking-h3);
  line-height:    var(--leading-h3);
}

h4 {
  font-size:      var(--text-h4);
  font-weight:    var(--weight-semibold);
  letter-spacing: var(--tracking-h4);
  line-height:    var(--leading-h4);
}

h5 {
  font-size:      var(--text-h5);
  font-weight:    var(--weight-semibold);
  letter-spacing: var(--tracking-h5);
  line-height:    var(--leading-h5);
}

h6 {
  font-size:      var(--text-h6);
  font-weight:    var(--weight-semibold);
  letter-spacing: var(--tracking-h6);
  line-height:    var(--leading-h6);
}

small, .text-small {
  font-size:   var(--text-small);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
}

.text-caption {
  font-size:   var(--text-caption);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
}

/* Semantic emphasis */
em {
  font-style:  italic;
  font-weight: inherit;
}

strong {
  font-weight: var(--weight-semibold);
  font-style:  normal;
}

strong em,
em strong {
  font-weight: var(--weight-semibold);
  font-style:  italic;
}

.italic {
  font-style: italic;
}

/* Blockquote — for help pages and articles */
blockquote {
  font-size:      var(--text-h5);
  font-style:     italic;
  font-weight:    var(--weight-medium);
  line-height:    var(--leading-h4);
  letter-spacing: -0.010em;
  border-left:    3px solid currentColor;
  padding-left:   1.25em;
  margin:         1.5em 0;
  opacity:        0.85;
}

/* Prose / article body */
.prose p {
  max-width:     68ch;
  margin-bottom: 1.25em;
}

.prose h2,
.prose h3,
.prose h4 {
  margin-top:    1.75em;
  margin-bottom: 0.5em;
}


/* ================================================================
   5. LAYOUT — PAGE SHELL & STICKY FOOTER
   The three-line sticky footer pattern. body is a flex column,
   .page-wrapper grows to fill available space, pushing
   .site-footer to the bottom of the viewport on short pages.
   On long pages the footer simply flows after the content.
   ================================================================ */

.page-wrapper {
  max-width: 1100px;
  margin:    0 auto;
  padding:   2.5rem 1.5rem 4rem;
  flex: 1;   /* this is the key line */
  width: 100%;
}


/* ================================================================
   6. NAVIGATION BAR
   Colour: #4A4A4A — lightened from Foundation's #333333 to
   reduce contrast with the new warm page background.
   Structure: flexbox, 48px height, left/right zones.
   ================================================================ */

.top-bar {
  background: var(--color-nav-bg) !important;
  padding:    0 1.5rem;
  display:    flex;
  align-items: center;
  justify-content: space-between;
  height:     48px;
  flex-shrink: 0;   /* prevent nav from shrinking in flex column body */
}

/* ---- Override Foundation's top-bar child element backgrounds ----
   Foundation sets background on .top-bar-section, li, and dropdown
   <ul> elements using its own selectors. These rules ensure every
   child of .top-bar stays on the same dark background. */
.top-bar,
.top-bar .top-bar-section,
.top-bar .top-bar-section ul,
.top-bar .top-bar-section li,
.top-bar .top-bar-section li:not(.has-form) a:not(.button),
.top-bar .top-bar-section .dropdown li {
  background: var(--color-nav-bg) !important;
}

/* Dropdown panel — slight depth so it floats over content */
.top-bar .top-bar-section li.has-dropdown > .dropdown {
  background: #3d3d3d !important;   /* 1 step darker than nav — signals it's floating */
  border:     1px solid rgba(0,0,0,0.25) !important;
}

.top-bar .top-bar-section .dropdown li a:not(.button):hover,
.top-bar .top-bar-section li:not(.has-form) a:not(.button):hover {
  background: rgba(255,255,255,0.08) !important;
  color:      var(--color-nav-text) !important;
}

.top-bar-left {
  display:     flex;
  align-items: center;
  gap:         2rem;
}

.top-bar-right {
  display:     flex;
  align-items: center;
  gap:         1.25rem;
}

.top-bar .site-name {
  color:           var(--color-nav-text);
  font-size:       var(--text-body);
  font-weight:     var(--weight-semibold);
  letter-spacing:  -0.010em;
  text-decoration: none;
}

.top-bar nav {
  display: flex;
  gap:     0;
}

.top-bar nav a {
  color:           var(--color-nav-text);
  text-decoration: none;
  font-size:       var(--text-body);
  font-weight:     var(--weight-regular);
  padding:         0 0.875rem;
  height:          48px;
  display:         flex;
  align-items:     center;
  gap:             0.3rem;
  transition:      background 0.15s ease;
}

.top-bar nav a:hover {
  background: rgba(255, 255, 255, 0.08);
}

.top-bar nav a .chevron {
  font-size: 0.65rem;
  opacity:   0.7;
}

.top-bar-right a {
  color:           var(--color-nav-muted);
  text-decoration: none;
  font-size:       var(--text-small);
  transition:      color 0.15s ease;
}

.top-bar-right a:hover {
  color: var(--color-nav-text);
}

.top-bar-right .separator {
  color:     #666;
  font-size: var(--text-small);
}


/* ================================================================
   7. PAGE HEADING
   Used as the main title on list and report pages.
   h2 size (1.953rem) chosen as a pragmatic compromise — reads
   clearly as a page title without dominating a utility page.
   Swap to h1/h3 tag freely; the .page-heading class controls
   the visual appearance independently of the semantic level.
   ================================================================ */

.page-heading {
  font-size:      var(--text-h2);
  font-weight:    var(--weight-bold);
  line-height:    var(--leading-h2);
  letter-spacing: var(--tracking-h2);
  color:          var(--color-text-heading);
  text-align:     center;
  margin-bottom:  1.75rem;
}


/* ================================================================
   8. BUTTONS
   Same #008CBA blue as Foundation. Refinements: slightly smaller
   padding, 4px border-radius, gap between grouped buttons.
   ================================================================ */

.btn {
  display:         inline-flex;
  align-items:     center;
  font-family:     var(--font-base);
  font-size:       var(--text-small);
  font-weight:     var(--weight-medium);
  line-height:     1;
  padding:         0.5rem 1rem;
  border-radius:   4px;
  border:          1px solid transparent;
  cursor:          pointer;
  text-decoration: none;
  transition:      background 0.15s ease, border-color 0.15s ease;
  white-space:     nowrap;
}

/* Primary — blue */
.btn-primary {
  background:   var(--color-primary);
  border-color: var(--color-primary-dark);
  color:        var(--color-primary-text);
}

.btn-primary:hover {
  background: var(--color-primary-dark);
}

/* Success — green */
.btn-success {
  background:   var(--color-success);
  border-color: var(--color-success-dark);
  color:        #FFFFFF;
}

.btn-success:hover {
  background: var(--color-success-dark);
}

/* Alert — red */
.btn-alert {
  background:   var(--color-alert);
  border-color: var(--color-alert-dark);
  color:        #FFFFFF;
}

.btn-alert:hover {
  background: var(--color-alert-dark);
}

/* Warning — amber */
.btn-warning {
  background:   var(--color-warning);
  border-color: var(--color-warning-dark);
  color:        #FFFFFF;
}

.btn-warning:hover {
  background: var(--color-warning-dark);
}

/* Secondary — gray (unchanged from Foundation) */
.btn-secondary {
  background:   #e7e7e7;
  border-color: #b9b9b9;
  color:        #333333;
}

.btn-secondary:hover {
  background: #b9b9b9;
}


/* ================================================================
   9. PANELS
   The main content container. White background with subtle shadow.
   This is the inversion from Foundation: previously the panel was
   light gray (#F6F6F6) on a white page. Now it is white on a
   warm tinted page — giving it a lifted, modern card feel.
   ================================================================ */

.panel {
  background:    var(--color-panel-bg);
  border:        1px solid var(--color-panel-border);
  border-radius: 6px;
  box-shadow:    0 1px 3px var(--color-panel-shadow),
                 0 1px 2px rgba(0, 0, 0, 0.04);
  overflow:      hidden;   /* clips header row to border-radius */
  margin-bottom: 1.25rem;
}


/* ================================================================
   10. TABLE / LIST ROWS
   CSS Grid layout. Column widths set per-page via a modifier
   class or inline style on .table-header and .task-row.
   Default below suits the standard 4-column list layout.
   ================================================================ */

/* Column header row — primary blue */
.table-header {
  background: var(--color-header-bg);
  display:    grid;
  padding:    0.625rem 1.25rem;
  gap:        1rem;
}

.table-header span {
  color:          var(--color-header-text);
  font-size:      var(--text-small);
  font-weight:    var(--weight-semibold);
  letter-spacing: 0.02em;      /* track OUT for reversed small text — improves legibility */
  text-transform: uppercase;
}

/* Data rows */
.task-list {
  list-style: none;
}

.task-row {
  display:       grid;
  align-items:   center;
  padding:       0.875rem 1.25rem;
  gap:           1rem;
  border-bottom: 1px solid var(--color-row-border);
  transition:    background 0.1s ease;
}

.task-row:last-child {
  border-bottom: none;
}

.task-row:hover {
  background: var(--color-row-hover);
}

.task-name {
  font-weight: var(--weight-medium);
  color:       var(--color-text-primary);
  font-size:   var(--text-body);
}

.task-tradie {
  font-size: var(--text-body);
  color:     var(--color-text-primary);
}

.task-actions {
  display:         flex;
  gap:             0.375rem;
  justify-content: flex-end;
}

/* Default grid template — 4 columns for standard list pages.
   Override with a class or inline style for different layouts. */
.table-header,
.task-row {
  grid-template-columns: 1fr 100px 180px 160px;
}


/* ================================================================
   11. URGENCY INDICATORS
   Dot + text. Two states: high (warm orange) and low (gray).
   Extend with .urgency-medium if needed.
   ================================================================ */

.urgency-high,
.urgency-low {
  display:     inline-flex;
  align-items: center;
  gap:         0.3rem;
  font-size:   var(--text-small);
  font-weight: var(--weight-medium);
}

.urgency-high { color: var(--color-urgency-high); }
.urgency-low  { color: var(--color-urgency-low);  }

.urgency-dot {
  width:         6px;
  height:        6px;
  border-radius: 50%;
  flex-shrink:   0;
}

.urgency-high .urgency-dot { background: var(--color-urgency-high-dot); }
.urgency-low  .urgency-dot { background: var(--color-urgency-low-dot);  }


/* ================================================================
   12. ACTION BARS & FOOTER BAR
   .action-bar — buttons above the panel (right-aligned)
   .footer-bar — buttons below the panel (left-aligned)
   ================================================================ */

.action-bar {
  display:         flex;
  justify-content: flex-end;
  gap:             0.5rem;
  margin-bottom:   1rem;
}

.footer-bar {
  display:         flex;
  justify-content: flex-start;
  gap:             0.5rem;
  margin-top:      0.25rem;
}


/* ================================================================
   13. SITE FOOTER
   Sticky to bottom of viewport on short pages (see section 5).
   Dividing line signals end of content on long pages.
   ================================================================ */

.site-footer {
  text-align:  center;
  color:       var(--color-text-muted);
  font-size:   var(--text-small);
  padding:     1.5rem 1.5rem;
  border-top:  1px solid var(--color-border);
  flex-shrink: 0;   /* prevent footer from shrinking in flex column body */
}


/* ================================================================
   14. FORM INPUTS & SEARCH BAR
   Inputs are styled to match button height and border system.
   The search bar combines a text input + submit button side by
   side — same pattern as Foundation's "collapse" layout but
   built with flexbox and no framework dependency.
   ================================================================ */

/* Base input — used standalone and inside .search-bar */
.input,
input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
textarea,
select {
  font-family:   var(--font-base);
  font-size:     var(--text-body);
  font-weight:   var(--weight-regular);
  color:         var(--color-text-primary);
  background:    var(--color-panel-bg);
  border:        1px solid var(--color-border);
  border-radius: 4px;
  padding:       0.5rem 0.75rem;
  line-height:   1.5;
  width:         100%;
  transition:    border-color 0.15s ease, box-shadow 0.15s ease;
  appearance:    none;   /* removes browser default styling on select */
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
  outline:      none;
  border-color: var(--color-primary);
  box-shadow:   0 0 0 3px rgba(0, 140, 186, 0.12);   /* soft blue focus ring */
}

input::placeholder,
textarea::placeholder {
  color:   var(--color-text-muted);
  opacity: 1;
}

/* Select — restore arrow indicator removed by appearance:none */
select {
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23767676' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right 0.6rem center;
  padding-right:       2rem;
  cursor:              pointer;
}

/* Form label — see section 20 for full definition including size and weight */
.form-label {
  display:       block;
  margin-bottom: 0.3rem;
}

/* Inline label (for rows-per-page selector etc.) */
.label-inline {
  font-size:   var(--text-small);
  font-weight: var(--weight-regular);
  color:       var(--color-text-muted);
  white-space: nowrap;
}

/* Search bar — input + button fused side by side.
   Usage: <div class="search-bar"><input ...><button ...></div> */
.search-bar {
  display:   flex;
  max-width: 380px;
}

.search-bar input {
  border-right:        none;
  border-radius:       4px 0 0 4px;
  flex:                1;
}

.search-bar input:focus {
  position: relative;   /* keeps focus ring above the button */
  z-index:  1;
}

.search-bar .btn {
  border-radius: 0 4px 4px 0;
  flex-shrink:   0;
}


/* ================================================================
   15. SORTABLE COLUMN HEADERS
   All header text stays white (per section 10 base styles).
   Active sort column is indicated by a slightly brighter white
   and the arrow character already rendered by PHP sort_arrow().
   Inactive columns dim slightly on hover to invite interaction.

   Classes match the PHP helper function output:
     sort-header        — inactive / not current sort
     sort-header-asc    — currently sorted ascending
     sort-header-desc   — currently sorted descending
   ================================================================ */

/* Wrapper anchor — removes default link styling inside header */
.table-header a {
  text-decoration: none;
  color:           inherit;
  display:         flex;
  align-items:     center;
  gap:             0.25rem;
}

/* Inactive sortable column */
.sort-header {
  color:       rgba(255, 255, 255, 0.80);   /* slightly dimmed */
  cursor:      pointer;
  transition:  color 0.15s ease;
}

.sort-header:hover {
  color: #FFFFFF;
}

/* Active sort — ascending */
.sort-header-asc {
  color:  #FFFFFF;
  cursor: pointer;
}

/* Active sort — descending */
.sort-header-desc {
  color:  #FFFFFF;
  cursor: pointer;
}

/* Sort arrow character — inherits colour from parent span */
.sort-arrow {
  font-size:   0.7rem;
  opacity:     0.9;
  margin-left: 0.15rem;
}

/* Underline on active column label only */
.sort-header-asc span,
.sort-header-desc span {
  text-decoration:       underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, 0.5);
}


/* ================================================================
   16. LIST TOOLBAR
   A horizontal bar below the panel that holds three zones:
     Left  — record count ("Showing 1–25 of 143")
     Centre — rows-per-page selector
     Right  — pagination (section 17)

   Usage:
   <div class="list-toolbar">
     <div class="list-toolbar__count">...</div>
     <div class="list-toolbar__perpage">...</div>
     <div class="list-toolbar__pagination">...</div>
   </div>
   ================================================================ */

.list-toolbar {
  display:     flex;
  align-items: center;
  gap:         1.5rem;
  padding:     0.75rem 0;
  flex-wrap:   wrap;   /* wraps gracefully on narrow screens */
}

.list-toolbar__count {
  font-size:   var(--text-small);
  color:       var(--color-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.list-toolbar__perpage {
  display:     flex;
  align-items: center;
  gap:         0.5rem;
  flex-shrink: 0;
}

/* Rows-per-page select — narrower than full-width inputs */
.list-toolbar__perpage select {
  width:   auto;
  padding: 0.3rem 2rem 0.3rem 0.6rem;   /* tighter — it's a short number list */
  font-size: var(--text-small);
}

.list-toolbar__pagination {
  margin-left: auto;   /* pushes pagination to the right */
}


/* ================================================================
   17. PAGINATION
   Flexbox row of page-number items. Matches button shape from
   section 8 but uses a lighter style for inactive pages.

   Active page: primary blue fill (same as .btn-primary)
   Inactive:    transparent with border, text muted
   Prev/Next:   text-only links, no border
   Unavailable: dimmed, not clickable
   ================================================================ */

.pagination {
  display:     flex;
  align-items: center;
  gap:         0.25rem;
  list-style:  none;
  flex-wrap:   wrap;
}

/* All items share base shape */
.pagination li a,
.pagination li span {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  font-family:     var(--font-base);
  font-size:       var(--text-small);
  font-weight:     var(--weight-medium);
  min-width:       2rem;
  height:          2rem;
  padding:         0 0.4rem;
  border-radius:   4px;
  border:          1px solid transparent;
  text-decoration: none;
  color:           var(--color-text-primary);
  transition:      background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  white-space:     nowrap;
}

/* Inactive page numbers */
.pagination li a {
  border-color: var(--color-border);
  color:        var(--color-text-primary);
}

.pagination li a:hover {
  background:   var(--color-row-hover);
  border-color: var(--color-primary);
  color:        var(--color-primary);
}

/* Current / active page */
.pagination li.current a,
.pagination li.current span {
  background:   var(--color-primary);
  border-color: var(--color-primary-dark);
  color:        #FFFFFF;
  cursor:       default;
}

/* Prev / Next — text links, wider hit area */
.pagination li:first-child a,
.pagination li:last-child a {
  border-color: transparent;
  color:        var(--color-primary);
  padding:      0 0.5rem;
}

.pagination li:first-child a:hover,
.pagination li:last-child a:hover {
  background:   transparent;
  border-color: transparent;
  color:        var(--color-primary-dark);
  text-decoration: underline;
}

/* Unavailable (disabled) state — prev on page 1, next on last page */
.pagination li.unavailable a,
.pagination li.unavailable span {
  border-color: transparent;
  color:        var(--color-text-muted);
  opacity:      0.5;
  cursor:       default;
  pointer-events: none;
}

/* Ellipsis items */
.pagination li.ellipsis a,
.pagination li.ellipsis span {
  border-color: transparent;
  color:        var(--color-text-muted);
  cursor:       default;
  pointer-events: none;
}


/* ================================================================
   18. DATA TABLES (tabular reports)
   For pages that use a real <table> element — financial summaries,
   capex reports, multi-column data grids. Distinct from the CSS
   Grid list rows (section 10) but visually consistent with them.

   Key decisions:
   - Header row: same primary blue + uppercase small text as lists
   - Data rows: same dividers and hover as lists
   - Totals row: uses <th> in last <tr> — tinted bg, semibold text
   - Number columns: right-aligned (financial convention)
   - Name/label columns: left-aligned
   ================================================================ */

/* Table wrapper — apply .data-table to the <table> element */
.data-table {
  width:           100%;
  border-collapse: collapse;
  font-size:       var(--text-body);
}

/* ---- Header row ---- */
.data-table thead tr {
  background: var(--color-header-bg);
}

.data-table thead th {
  color:          var(--color-header-text);
  font-size:      var(--text-small);
  font-weight:    var(--weight-semibold);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding:        0.625rem 0.875rem;
  text-align:     left;
  white-space:    nowrap;
  border:         none;
}

/* Right-align numeric/currency header cells */
.data-table thead th.col-num,
.data-table thead th.col-currency {
  text-align: right;
}

/* ---- Data rows ---- */
.data-table tbody tr {
  border-bottom: 1px solid var(--color-row-border);
  transition:    background 0.1s ease;
}

.data-table tbody tr:last-child {
  border-bottom: none;
}

.data-table tbody tr:hover {
  background: var(--color-row-hover);
}

.data-table tbody td {
  padding:        0.75rem 0.875rem;
  color:          var(--color-text-primary);
  vertical-align: middle;
}

/* Right-align numeric/currency data cells */
.data-table tbody td.col-num,
.data-table tbody td.col-currency {
  text-align:  right;
  font-variant-numeric: tabular-nums;   /* keeps digits same width for column alignment */
}

/* ---- Totals row ---- */
/* Uses <tfoot> or a final <tr> with <th> elements in <tbody>.
   Both patterns are common in PHP-generated tables. */
.data-table tfoot tr,
.data-table tbody tr.row-totals {
  background:    #EEF6FA;   /* very light tint of primary blue — distinguishes from data rows */
  border-top:    2px solid var(--color-primary);
  border-bottom: none;
}

.data-table tfoot tr:hover,
.data-table tbody tr.row-totals:hover {
  background: #E5F1F7;   /* slightly deeper tint on hover */
}

.data-table tfoot th,
.data-table tbody tr.row-totals th,
.data-table tbody tr.row-totals td {
  padding:        0.75rem 0.875rem;
  font-size:      var(--text-small);
  font-weight:    var(--weight-semibold);
  color:          var(--color-text-heading);   /* dark teal — matches page heading, signals importance */
  text-align:     left;
  font-variant-numeric: tabular-nums;
}

.data-table tfoot th.col-num,
.data-table tfoot th.col-currency,
.data-table tbody tr.row-totals th.col-num,
.data-table tbody tr.row-totals th.col-currency {
  text-align: right;
}

/* ---- Links inside table cells ---- */
.data-table td a {
  color:           var(--color-primary);
  text-decoration: none;
  font-weight:     var(--weight-medium);
}

.data-table td a:hover {
  color:           var(--color-primary-dark);
  text-decoration: underline;
}


/* ================================================================
   19. ZEBRA STRIPING (opt-in)
   Add class .table-striped to .data-table on dense financial
   reports where many rows of similar numbers need visual
   separation. Not applied by default — use judgement per page.

   Usage: <table class="data-table table-striped">
   ================================================================ */

.data-table.table-striped tbody tr:nth-child(even) {
  background: #F5F9FB;   /* very faint blue-tinted stripe — warmer than a plain gray */
}

.data-table.table-striped tbody tr:nth-child(even):hover {
  background: var(--color-row-hover);   /* hover overrides stripe */
}

/* Totals row always overrides stripe */
.data-table.table-striped tfoot tr,
.data-table.table-striped tbody tr.row-totals {
  background: #EEF6FA;
}


/* ================================================================
   20. FORM LAYOUT
   Two-row asymmetric grid for add/edit forms.

   Row 1 — Task Name (80%) : Urgency (20%)
            Uses grid-template-columns: 4fr 1fr
   Row 2 — Reported By (60%) : Assigned To (40%)
            Uses grid-template-columns: 3fr 2fr

   Since CSS Grid can only have one column definition per grid,
   we achieve the different row proportions by using sub-grids
   (or, for wider browser support, by placing each row in its
   own .form-row container with its own column definition).

   Structure:
     <form class="form-grid">
       <div class="form-row form-row--80-20">
         <div class="form-group">Task Name</div>
         <div class="form-group">Urgency</div>
       </div>
       <div class="form-row form-row--60-40">
         <div class="form-group">Reported By</div>
         <div class="form-group">Assigned To</div>
       </div>
       <div class="form-group form-group--full">Comments</div>
       <div class="form-actions">buttons</div>
     </form>
   ================================================================ */

.form-grid {
  display:        flex;
  flex-direction: column;
  gap:            1.25rem;
  padding:        1.5rem;
}

/* A horizontal row of fields */
.form-row {
  display: grid;
  gap:     1.5rem;
}

/* Row 1: 80% / 20% — Task Name : Urgency */
.form-row--80-20 {
  grid-template-columns: 4fr 1fr;
}

/* Row 2: 60% / 40% — Reported By : Assigned To */
.form-row--60-40 {
  grid-template-columns: 3fr 2fr;
}

/* Single field that spans the full width (e.g. Comments) */
.form-group--full {
  width: 100%;
}

/* Individual label + input unit */
.form-group {
  display:        flex;
  flex-direction: column;
  gap:            0.3rem;
}

/* Textarea — taller by default */
.form-group textarea {
  min-height: 120px;
  resize:     vertical;
}

/* Textarea — taller by default */
.form-group--full textarea {
  min-height: 120px;
  resize:     vertical;
}

/* ================================================================
   FORM LABELS & HELPER TEXT
   Labels are larger than body text for clear hierarchy.
   Foundation sets label { font-size: 0.875rem } — we need to
   beat that with a more specific selector.
   Helper/validation text is deliberately smaller to recede.
   ================================================================ */

/* Stronger selector to beat Foundation's `label` rule */
form .form-label,
.form-group .form-label,
.form-group--full .form-label {
  display:       block;
  font-size:     var(--text-h5) !important;   /* 16px — clearly larger than input text */
  font-weight:   var(--weight-semibold) !important;
  color:         var(--color-text-primary) !important;
  margin-bottom: 0.25rem;
  line-height:   var(--leading-h5);
}

/* Required indicator — visibly smaller than the label */
form .form-label .required,
.form-group .form-label .required {
  font-size:    var(--text-caption) !important;  /* 10px — clearly smaller */
  font-weight:  var(--weight-regular) !important;
  color:        var(--color-text-muted) !important;
  margin-left:  0.4rem;
  font-style:   italic;
  text-transform: none;
  letter-spacing: 0;
}

/* Helper/qualifier text — e.g. "A task name is required." */
.form-helper {
  font-size:   var(--text-caption);   /* 10px — recedes behind label */
  color:       var(--color-text-muted);
  margin-top:  0.15rem;
}

/* Inline validation error — hidden by default, shown after submit attempt.
   Two trigger patterns:
   1. PHP re-renders the form with class="form-submitted" on <form> after a
      failed server-side validation — all errors become visible.
   2. The JS below adds .form-submitted on the submit button click so
      client-side required errors show immediately on the first attempt. */
.form-error {
  display:    none;              /* hidden until triggered */
  font-size:  var(--text-caption);
  color:      var(--color-alert);
  margin-top: 0.15rem;
}

/* Show all errors when form has been submitted */
.form-submitted .form-error {
  display: block;
}

/* Show only the error next to an actually-invalid field */
.form-submitted .form-group input:invalid ~ .form-error,
.form-submitted .form-group select:invalid ~ .form-error,
.form-submitted .form-group--full input:invalid ~ .form-error,
.form-submitted .form-group--full select:invalid ~ .form-error {
  display: block;
}

/* ================================================================
   FORM ACTIONS
   Buttons sit OUTSIDE the panel, floating below it.
   The .panel clips its overflow, so .form-actions must be
   rendered after the closing </div> of .panel.

   Usage:
     </div><!-- /.panel -->
     <div class="form-actions">
       <input type="submit" class="btn btn-primary" value="Save">
       <a href="..." class="btn btn-secondary">Cancel</a>
     </div>
   ================================================================ */

.form-actions {
  display:      flex;
  align-items:  center;
  gap:          0.5rem;
  padding:      1rem 0 0.5rem;   /* breathing room above/below */
  margin-top:   0;               /* no panel border-top — it's outside */
}

/* CKEditor container — ensure it fills its form-group */
.form-group .ck-editor,
.form-group--full .ck-editor {
  width: 100%;
}

/* ---- Responsive: stack to one column on narrow screens ---- */
@media (max-width: 640px) {
  .form-row--80-20,
  .form-row--60-40 {
    grid-template-columns: 1fr;
  }
}