/* ================================================================
   PLAN HEAVEN — MASTER STYLESHEET
   Version 1.9.0  |  6 April 2026  | S27 Print added
   
   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
   9a. Page tabs & filter bar
   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:       #FAFAF9;

  /* Panel — the clean anchor. White with a soft shadow. */
  --color-panel-bg:      #FFFFFF;
  --color-panel-border:  #E0E0E0;
  --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:        #1C1C1C;
  --color-nav-text:      #FFFFFF;
  --color-nav-muted:     #AAAAAA;   /* 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;
}


a {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}


/* ================================================================
   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,
.app-shell {
  flex: 1;   /* grows to fill viewport height, pushing .site-footer to the bottom */
}

.page-wrapper {
  max-width: 1100px;
  margin:    0 auto;
  padding:   2.5rem 1.5rem 4rem;
  width: 100%;
}


/* ================================================================
   6. NAVIGATION BAR
   Colour: #1C1C1C — near-black for confident, bold appearance.
   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;
  position:   sticky;
  top:        0;
  z-index:    1000;
}

/* ---- 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: #0d0d0d !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;
  justify-content: center;
  font-family:     var(--font-base);
  font-size:       var(--text-small);
  font-weight:     var(--weight-medium);
  line-height:     1;
  height:          42px;         /* explicit height to match search bar */
  padding:         0 1rem;       /* only horizontal padding needed with fixed height */
  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,
.btn-primary:active,
.btn-primary:focus {
  background: var(--color-primary-dark);
  color:      var(--color-primary-text);
  text-decoration: none;
}
.btn-primary:visited {
  background: #008CBA;  /* --color-primary — explicit hex required: CSS vars not resolved in :visited */
  color:      #FFFFFF;
  text-decoration: none;
}

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

.btn-success:hover,
.btn-success:active,
.btn-success:focus {
  background: var(--color-success-dark);
  color:      #FFFFFF;
  text-decoration: none;
}
.btn-success:visited {
  background: #43AC6A;  /* --color-success */
  color:      #FFFFFF;
  text-decoration: none;
}

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

.btn-alert:hover,
.btn-alert:active,
.btn-alert:focus {
  background: var(--color-alert-dark);
  color:      #FFFFFF;
  text-decoration: none;
}
.btn-alert:visited {
  background: #f04124;  /* --color-alert */
  color:      #FFFFFF;
  text-decoration: none;
}

/* Danger — alias of alert, for delete/destructive actions */
.btn-danger,
.btn-danger:visited {
  background:   var(--color-alert);
  border-color: var(--color-alert-dark);
  color:        #FFFFFF;
}

.btn-danger:hover,
.btn-danger:active,
.btn-danger:focus {
  background: var(--color-alert-dark);
  color:      #FFFFFF;
  text-decoration: none;
}

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

.btn-warning:hover,
.btn-warning:active,
.btn-warning:focus {
  background: var(--color-warning-dark);
  color:      #FFFFFF;
  text-decoration: none;
}
.btn-warning:visited {
  background: #f08a24;  /* --color-warning */
  color:      #FFFFFF;
  text-decoration: none;
}

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

.btn-secondary:hover,
.btn-secondary:active,
.btn-secondary:focus {
  background: #b9b9b9;
  color:      #333333;
  text-decoration: none;
}
.btn-secondary:visited {
  background: #e7e7e7;  /* resting-state grey — explicit hex required */
  color:      #333333;
  text-decoration: none;
}


/* ================================================================
   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;
  padding:       1.25rem 1.5rem;   /* replaces Foundation's default panel padding */
}


/* ================================================================
   9a. PAGE TABS & FILTER BAR
   Filing-cabinet tabs that sit directly on top of a panel,
   visually connecting to it. Used on schedule list pages where
   multiple views (by task / by tradie / by unit) share a tab bar.

   Structure:
     <div class="filter-bar"> … </div>
     <div class="page-tabs">
       <a class="page-tab active">Current view</a>
       <a href="…" class="page-tab">Other view</a>
     </div>
     <div class="panel panel-below-tabs"> … </div>
   ================================================================ */

/* Row of tabs sitting on the panel's top border */
.page-tabs {
  display:        flex;
  align-items:    flex-end;
  gap:            0.25rem;
  padding-left:   0.25rem;
  border-bottom:  1px solid var(--color-panel-border);
  margin-bottom:  0;
}

/* Individual tab — !important throughout to beat Foundation 5 anchor resets */
.page-tab {
  position:        relative !important;
  bottom:          -1px !important;          /* overlaps the border-bottom of .page-tabs */
  display:         inline-block !important;
  padding:         0.375rem 1.125rem 0.45rem !important;
  font-size:       0.775rem !important;
  font-weight:     var(--weight-semibold) !important;
  letter-spacing:  0.02em !important;
  text-decoration: none !important;
  border-radius:   5px 5px 0 0 !important;
  color:           var(--color-text-muted) !important;
  transition:      color 0.15s ease, background 0.15s ease;
}

.page-tab:hover {
  color:           var(--color-text-primary) !important;
  text-decoration: none !important;
}

/* Active tab — white background matches page-bg, hides bottom border */
.page-tab.active {
  color:               var(--color-text-heading) !important;
  background:          var(--color-page-bg) !important;
  border:              1px solid var(--color-panel-border) !important;
  border-bottom-color: var(--color-page-bg) !important;
}

/* Panel modifier — removes top border and top-corner radius
   so the tabs above provide the visual top edge */
.panel-below-tabs {
  border-top:    none !important;
  border-radius: 0 0 6px 6px !important;
}

/* Filter bar — sits above the tabs, between page title and panel */
.filter-bar {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             1rem;
  margin-bottom:   1.25rem;
  flex-wrap:       wrap;
}


/* ================================================================
   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.
   ================================================================ */

/* ── Horizontal-scroll wrapper for wide tables/grids ───────────────────
   Reusable container for grid/table layouts that exceed the available
   content width (typical on laptops with the LTMP/RM sidebar visible).
   Two-layer markup so the right-edge shadow stays in place while the
   inner element scrolls.
   Usage:
     <div class="table-scroll-shell">
       <div class="table-scroll-wrap">
         <div class="table-header my-grid-class">...</div>
         <ul class="task-list">
           <li class="task-row my-grid-class">...</li>
         </ul>
       </div>
     </div>
   The inner grid class (e.g. .my-grid-class) MUST set its own min-width
   ≥ the sum of its fixed column widths, otherwise the grid collapses
   and the scroll never engages.
   ──────────────────────────────────────────────────────────────────── */
.table-scroll-shell {
  position: relative;
}
.table-scroll-shell::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 28px;
  pointer-events: none;
  background: linear-gradient(to left, rgba(0,0,0,0.10), rgba(0,0,0,0));
  z-index: 5;
}
.table-scroll-wrap {
  overflow-x: auto;
}
@media (max-width: 767px) {
  /* Mobile abandons grid for card-stacking — no horizontal scroll, no hint */
  .table-scroll-shell::after { display: none; }
}

/* 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;
  flex-wrap:       wrap;
}

/* Thin vertical rule between button groups in a footer-bar */
.btn-divider {
  width:       1px;
  height:      28px;
  background:  var(--color-border);
  align-self:  center;
  margin:      0 0.25rem;
  flex-shrink: 0;
}


/* ================================================================
   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;
  flex-shrink: 0;   /* prevent footer from shrinking in flex column body */
}

/* On LTMP sidebar pages the footer sits outside .app-shell, so push it
   past the sidebar. Reset to zero below the sidebar breakpoint. */
.lt-layout ~ .site-footer {
  margin-left: 220px;
}

@media (max-width: 1024px) {
  .lt-layout ~ .site-footer {
    margin-left: 180px;
  }
}

@media (max-width: 767px) {
  .lt-layout ~ .site-footer {
    margin-left: 0;
  }
}


/* ================================================================
   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="date"],
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="date"]: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 */
}

/* Native date input internal text — inherit form font via WebKit pseudo-elements
   so the DD/MM/YYYY display matches the rest of the form. Firefox inherits
   directly from the input rule above, no pseudo-elements needed there. */
input[type="date"]::-webkit-datetime-edit,
input[type="date"]::-webkit-datetime-edit-fields-wrapper,
input[type="date"]::-webkit-datetime-edit-text,
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-year-field {
  font-family: var(--font-base);
  font-size:   var(--text-body);
  font-weight: var(--weight-regular);
  color:       var(--color-text-primary);
}

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;
  align-items: center;   /* vertically center input and button within the search-bar */
  max-width:   380px;
  height:      42px;     /* explicit height to match buttons */
  margin:      0;        /* remove form default margins */
}

.search-bar input {
  border-right:        none;
  border-radius:       4px 0 0 4px;
  flex:                1;
  height:              42px;              /* explicit height to match buttons */
  padding:             0 0.75rem;         /* only horizontal padding needed with fixed height */
  line-height:         1;
  font-size:           var(--text-small);
  align-self:          center;            /* vertically center within search-bar */
  margin:              0;                 /* ensure no margin */
}

.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;
  margin:        0;  /* ensure no margin throws off alignment */
}


/* ================================================================
   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;
}

/* Row: 1fr / 3fr — e.g. Task Ref : Task Name */
.form-row--1-3 {
  grid-template-columns: 1fr 3fr;
}

/* Row: 2fr / 1fr / 1fr — e.g. Tradie : Due Date : Frequency */
.form-row--2-1-1 {
  grid-template-columns: 2fr 1fr 1fr;
}

/* 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;
  }
}


/* On desktop, task-meta-mobile is a transparent passthrough —
   display:contents makes the browser ignore the wrapper div so
   urgency and tradie still sit in their own grid columns. */
.task-meta-mobile {
  display: contents;
}


/* ================================================================
   21. MOBILE RESPONSIVE — TASK LIST CARDS
   Below 600px the fixed-column grid is replaced with a card layout.
   Works automatically on any page using .task-row / .table-header.
   No PHP changes needed — inline grid-template-columns is overridden
   by the more specific rules here.
   ================================================================ */

/* ---- Tablet / Fold: 601px–860px ----
   Still a grid but switch to proportional columns so nothing
   overflows. Inline pixel widths on .task-row are overridden here.
   The header aligns correctly because both header and row use the
   same override. ---- */
@media (min-width: 601px) and (max-width: 860px) {
  .table-header,
  .task-row {
    grid-template-columns: 2fr 90px 130px 130px !important;
    gap: 0.5rem !important;
  }
}

@media (max-width: 600px) {

  /* Hide the column header — redundant in card layout */
  .table-header {
    display: none !important;
  }

  /* Each row becomes a self-contained card */
  .task-row {
    display:       block !important;
    padding:       0.875rem 1rem !important;
    border-bottom: 1px solid var(--color-row-border) !important;
    /* override any inline grid-template-columns */
    grid-template-columns: unset !important;
  }

  /* Task name — prominent, full width */
  .task-name {
    font-size:     var(--text-body) !important;
    font-weight:   var(--weight-semibold) !important;
    margin-bottom: 0.4rem !important;
  }

  /* Meta row: urgency + tradie side by side */
  .task-row .task-meta-mobile {
    display:       flex !important;
    align-items:   center;
    gap:           0.75rem;
    flex-wrap:     wrap;
    margin-bottom: 0.5rem;
  }

  .task-tradie {
    font-size: var(--text-small) !important;
    color:     var(--color-text-secondary) !important;
  }

  /* Action buttons — full width row at bottom of card */
  .task-actions {
    justify-content: flex-start !important;
    margin-top:      0.5rem !important;
  }

  /* General: prevent action-bar buttons stacking awkwardly */
  .action-bar {
    flex-wrap: wrap !important;
    gap:       0.5rem !important;
  }

  .action-bar .btn,
  .footer-bar .btn {
    font-size: var(--text-small) !important;
    padding:   0.4rem 0.75rem !important;
  }

  /* Page heading — slightly smaller on very narrow screens */
  .page-heading {
    font-size: var(--text-h3) !important;
  }

}/* ================================================================

/* ================================================================
   22. RM SIDEBAR PAGES — RESPONSIVE TABLE OVERRIDES
   These rules apply only on pages that use inc_rm_sidebar.php,
   identified by the .rm-layout class on .app-shell.
   
   The sidebar occupies 180px at tablet (768–1199px), which reduces
   available content width. These overrides kick in earlier than the
   general section-21 breakpoints to compensate.
   
   On RM list pages, each row <div> carries a data-label attribute
   (e.g. data-label="Address"). The card layout's ::before rule uses
   this to show a small label above each value at mobile widths.
   ================================================================ */

/* ---- Tablet: sidebar visible at 180px, content ~590–1020px ---- */
@media (min-width: 768px) and (max-width: 1199px) {
  /* Override inline pixel grid-template-columns on RM task rows.
     5-column layout: Ref | Address | Task | Tradie | Due Date.
     Owner is hidden — it reappears as a data-label card row at mobile. */
  .rm-layout .table-header,
  .rm-layout .task-row {
    grid-template-columns: 55px 160px 1fr 130px 95px !important;
  }
  /* Hide the Owner column (3rd child) at tablet */
  .rm-layout .table-header span:nth-child(3),
  .rm-layout .task-row > div:nth-child(3) {
    display: none !important;
  }
  /* Page tabs: allow wrapping on narrower tablets */
  .rm-layout .page-tabs {
    flex-wrap: wrap;
    gap: 0.25rem;
  }
}

/* ---- Mobile: sidebar hidden, full-width card layout ---- */
@media (max-width: 767px) {

  /* Hide the column header row */
  .rm-layout .table-header {
    display: none !important;
  }

  /* Each row becomes a self-contained card */
  .rm-layout .task-row {
    display: block !important;
    padding: 0.875rem 0.875rem !important;
    border-bottom: 1px solid var(--color-row-border) !important;
    grid-template-columns: unset !important;
  }

  /* data-label pattern: small uppercase label above each cell value */
  .rm-layout .task-row > div[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-text-secondary);
    margin-bottom: 0.1rem;
    margin-top: 0.55rem;
  }
  /* Task name: prominent, no label needed (it's self-evident) */
  .rm-layout .task-row > .task-name {
    font-size: var(--text-body) !important;
    font-weight: var(--weight-semibold) !important;
    margin-bottom: 0.1rem !important;
    order: -1; /* visually first */
  }
  .rm-layout .task-row > .task-name::before {
    display: none !important; /* suppress label for task name */
  }

  /* Inline pair: ref + address side by side */
  .rm-layout .task-row > .rm-cell-ref,
  .rm-layout .task-row > .rm-cell-address {
    display: inline !important;
  }
  .rm-layout .task-row > .rm-cell-ref::before,
  .rm-layout .task-row > .rm-cell-address::before {
    display: none !important;
  }
  /* Address line: ref · address as a single muted metadata line */
  .rm-layout .task-row > .rm-cell-ref {
    font-size: var(--text-small);
    color: var(--color-text-secondary);
  }
  .rm-layout .task-row > .rm-cell-ref::after {
    content: ' · ';
    color: var(--color-text-secondary);
  }
  .rm-layout .task-row > .rm-cell-address {
    font-size: var(--text-small);
    color: var(--color-text-secondary);
  }

  /* Page tabs: stack vertically */
  .rm-layout .page-tabs {
    flex-wrap: wrap;
    gap: 0.25rem;
  }
  .rm-layout .page-tab {
    font-size: var(--text-small) !important;
    padding: 0.35rem 0.625rem !important;
  }

  /* Filter bar search: full width */
  .rm-layout .search-bar {
    width: 100%;
  }
  .rm-layout .search-bar input[type="text"] {
    flex: 1 !important;
    min-width: 0 !important;
  }
}

   ================================================================ */




/* ================================================================
   FOUNDATION COEXISTENCE OVERRIDES
   Property dashboard is in transition: new CSS classes sit
   alongside still-Foundation panels lower on the page.
   These rules give our new dashboard components enough specificity
   to beat Foundation without touching anything it still owns.
   ================================================================ */

/* ---- Centred dashboard wrapper — beats Foundation .row max-width ---- */
.dash-wrapper {
  max-width:  1100px !important;
  margin:     0 auto !important;
  padding:    0 1.5rem !important;
  width:      100% !important;
  box-sizing: border-box !important;
}

/* ---- Dashboard page title ---- */
h2.dash-page-title,
.dash-page-title {
  font-size:      var(--text-h3) !important;
  font-weight:    var(--weight-semibold) !important;
  color:          var(--color-text-heading) !important;
  text-align:     center !important;
  margin-bottom:  1.25rem !important;
  margin-top:     1rem !important;
}

/* ---- Button bar — force right-align regardless of Foundation grid ---- */
.dash-btn-bar {
  display:         flex !important;
  flex-wrap:       wrap !important;
  justify-content: flex-end !important;
  align-items:     center !important;
  gap:             0.375rem !important;
  margin-bottom:   1.25rem !important;
  text-align:      left !important;
}

/* ---- All buttons inside dash-btn-bar beat Foundation's a.button rule ---- */
.dash-btn-bar .btn,
.dash-btn-bar a.btn {
  display:         inline-flex !important;
  align-items:     center !important;
  justify-content: center !important;
  height:          36px !important;
  padding:         0 0.875rem !important;
  font-size:       var(--text-small) !important;
  font-weight:     var(--weight-medium) !important;
  border-radius:   4px !important;
  text-decoration: none !important;
  white-space:     nowrap !important;
  margin:          0 !important;
}

.dash-btn-bar .btn-primary,
.dash-btn-bar a.btn-primary {
  background:   var(--color-primary) !important;
  border:       1px solid var(--color-primary-dark) !important;
  color:        #FFFFFF !important;
}

.dash-btn-bar .btn-primary:hover,
.dash-btn-bar a.btn-primary:hover {
  background: var(--color-primary-dark) !important;
  color:      #FFFFFF !important;
}

.dash-btn-bar .btn-secondary,
.dash-btn-bar a.btn-secondary {
  background:   #e7e7e7 !important;
  border:       1px solid #b9b9b9 !important;
  color:        #333333 !important;
}

.dash-btn-bar .btn-secondary:hover,
.dash-btn-bar a.btn-secondary:hover {
  background: #b9b9b9 !important;
  color:      #333333 !important;
}

/* ---- Split button group — Foundation interferes with <button> elements ---- */
.dash-btn-group {
  position: relative !important;
  display:  inline-flex !important;
}

/* Full reset on our <button> — Foundation overrides background, border,
   box-shadow, text-shadow, padding, margin on all button elements */
.dash-btn-group .dash-split-btn {
  display:         inline-flex !important;
  align-items:     center !important;
  justify-content: center !important;
  gap:             0.35rem !important;
  height:          36px !important;
  padding:         0 0.875rem !important;
  font-family:     var(--font-base) !important;
  font-size:       var(--text-small) !important;
  font-weight:     var(--weight-medium) !important;
  background:      var(--color-primary) !important;
  border:          1px solid var(--color-primary-dark) !important;
  border-radius:   4px !important;
  color:           #FFFFFF !important;
  cursor:          pointer !important;
  white-space:     nowrap !important;
  margin:          0 !important;
  box-shadow:      none !important;
  text-shadow:     none !important;
  line-height:     1 !important;
  text-decoration: none !important;
}

.dash-btn-group .dash-split-btn:hover {
  background: var(--color-primary-dark) !important;
  color:      #FFFFFF !important;
}

/* Dropdown — full positioning rules with !important to beat Foundation.
   ph-menu class name avoids Foundation JS class detection. */
.dash-btn-group .ph-menu {
  display:       none !important;
  position:      absolute !important;
  top:           calc(100% + 2px) !important;
  right:         0 !important;
  left:          auto !important;
  min-width:     220px !important;
  width:         auto !important;
  background:    var(--color-panel-bg) !important;
  border:        1px solid var(--color-panel-border) !important;
  border-radius: 4px !important;
  box-shadow:    0 4px 12px rgba(0, 0, 0, 0.12) !important;
  list-style:    none !important;
  padding:       0 !important;
  margin:        0 !important;
  z-index:       9999 !important;
  overflow:      hidden !important;
  float:         none !important;
}

.dash-btn-group:hover .ph-menu,
.dash-btn-group:focus-within .ph-menu {
  display: block !important;
}

.dash-btn-group .ph-menu li {
  display:    block !important;
  float:      none !important;
  list-style: none !important;
  margin:     0 !important;
  padding:    0 !important;
  border-top: none !important;
}

.dash-btn-group .ph-menu li + li {
  border-top: 1px solid var(--color-divider) !important;
}

.dash-btn-group .ph-menu li a {
  display:         block !important;
  padding:         0.6rem 1rem !important;
  font-size:       var(--text-small) !important;
  font-weight:     var(--weight-regular) !important;
  color:           var(--color-text-primary) !important;
  text-decoration: none !important;
  white-space:     nowrap !important;
  background:      transparent !important;
  border:          none !important;
}

.dash-btn-group .ph-menu li a:hover {
  background: var(--color-row-hover) !important;
  color:      var(--color-primary) !important;
}

/* ---- Accordion panels — beat Foundation's .panel and .accordion rules ---- */
details.acc-panel {
  background:    var(--color-panel-bg) !important;
  border:        1px solid var(--color-panel-border) !important;
  border-radius: 6px !important;
  box-shadow:    0 1px 3px var(--color-panel-shadow) !important;
  margin-bottom: 1rem !important;
  padding:       0 !important;   /* Foundation .panel adds padding */
  overflow:      hidden !important;
}

details.acc-panel > summary.acc-header {
  display:         flex !important;
  align-items:     center !important;
  justify-content: space-between !important;
  padding:         0.875rem 1.25rem !important;
  font-size:       var(--text-h5) !important;
  font-weight:     var(--weight-semibold) !important;
  color:           var(--color-text-heading) !important;
  background:      var(--color-panel-bg) !important;
  cursor:          pointer !important;
  list-style:      none !important;
  margin:          0 !important;
}

details.acc-panel > summary.acc-header:hover {
  background: var(--color-row-hover) !important;
}

details.acc-panel > summary.acc-header::after {
  content:     '▶' !important;
  font-size:   0.65rem !important;
  color:       var(--color-text-muted) !important;
  flex-shrink: 0 !important;
  transition:  transform 0.2s ease !important;
  margin-left: 0.75rem !important;
}

details[open].acc-panel > summary.acc-header::after {
  transform: rotate(90deg) !important;
}

details.acc-panel > .acc-body {
  display:    block !important;
  padding:    1.25rem !important;
  border-top: 1px solid var(--color-panel-border) !important;
}

/* Ensure details element itself is block-level — some Foundation resets
   can interfere with the native details/summary rendering */
details.acc-panel {
  display: block !important;
}

/* acc-footer buttons also need Foundation resistance */
.acc-footer .btn,
.acc-footer a.btn {
  display:         inline-flex !important;
  align-items:     center !important;
  height:          36px !important;
  padding:         0 0.875rem !important;
  font-size:       var(--text-small) !important;
  font-weight:     var(--weight-medium) !important;
  border-radius:   4px !important;
  text-decoration: none !important;
  margin:          0 !important;
  white-space:     nowrap !important;
}

.acc-footer .btn-primary,
.acc-footer a.btn-primary {
  background: var(--color-primary) !important;
  border:     1px solid var(--color-primary-dark) !important;
  color:      #FFFFFF !important;
}

.acc-footer .btn-primary:hover,
.acc-footer a.btn-primary:hover {
  background: var(--color-primary-dark) !important;
  color:      #FFFFFF !important;
}

.acc-footer .btn-warning,
.acc-footer a.btn-warning {
  background: var(--color-warning) !important;
  border:     1px solid var(--color-warning-dark) !important;
  color:      #FFFFFF !important;
}

.acc-footer .btn-secondary,
.acc-footer a.btn-secondary {
  background:   #e7e7e7 !important;
  border:       1px solid #b9b9b9 !important;
  color:        #333333 !important;
}


/* ================================================================
   DASHBOARD INFO GRID & INFO LIST
   Two-column layout inside accordion bodies.
   All rules use !important to beat Foundation's flex/float overrides.
   ================================================================ */

/* Two-column container */
.info-grid {
  display:   flex !important;
  flex-wrap: wrap !important;
  gap:       1.5rem !important;
  margin:    0 !important;
  padding:   0 !important;
}

.info-grid__main,
.info-grid__aside {
  flex:      1 1 100% !important;
  min-width: 0 !important;
  float:     none !important;   /* beat any Foundation float */
}

@media (min-width: 640px) {
  .info-grid__main  { flex: 1 1 calc(50% - 0.75rem) !important; max-width: calc(50% - 0.75rem) !important; }
  .info-grid__aside { flex: 1 1 calc(50% - 0.75rem) !important; max-width: calc(50% - 0.75rem) !important; }
}

/* Info list — clean label/value list, no bullets */
.info-list {
  list-style:     none !important;
  padding:        0 !important;
  margin:         0 !important;
  display:        flex !important;
  flex-direction: column !important;
  gap:            0.4rem !important;
}

.info-list li {
  font-size:   var(--text-body) !important;
  color:       var(--color-text-primary) !important;
  line-height: var(--leading-body) !important;
  /* Beat Foundation's li margin */
  margin:      0 !important;
  padding:     0 !important;
  /* No bullets even if Foundation adds list-style */
  list-style:  none !important;
}

/* Label portion of each info item */
.info-label {
  font-weight: var(--weight-semibold) !important;
  color:       var(--color-text-heading) !important;
}

/* Nested address sub-list */
.info-sublist {
  list-style:  none !important;
  padding:     0 !important;
  margin:      0.2rem 0 0 0.75rem !important;
}

.info-sublist li {
  font-size:  var(--text-body) !important;
  color:      var(--color-text-muted) !important;
  margin:     0 !important;
  list-style: none !important;
}

/* Property photo — right column image */
.info-photo {
  width:         100% !important;
  max-width:     100% !important;
  max-height:    280px !important;   /* keeps it proportional without dominating */
  height:        auto !important;
  object-fit:    cover !important;
  border-radius: 4px !important;
  border:        1px solid var(--color-panel-border) !important;
  display:       block !important;
}

/* Section headings inside acc-body (Administrators, Primary Admin etc.) */
.acc-body h5 {
  font-size:      var(--text-h5) !important;
  font-weight:    var(--weight-semibold) !important;
  color:          var(--color-text-heading) !important;
  margin-top:     1rem !important;
  margin-bottom:  0.25rem !important;
  letter-spacing: var(--tracking-h5) !important;
}

.acc-body h5:first-child {
  margin-top: 0 !important;
}

/* Help text below info list */
.info-help-text {
  font-size:  var(--text-small) !important;
  color:      var(--color-text-muted) !important;
  margin-top: 1rem !important;
  line-height: var(--leading-body) !important;
}


/* ================================================================
   PANEL INSET FOOTER BAR
   A tinted footer bar inside the panel card — uses the page
   background colour so it reads visually as "outside" the panel
   content, mirroring the header bar at the top.
   Sits flush to the card bottom edge (panel clips it to radius).
   ================================================================ */

.acc-panel-footer {
  display:          flex !important;
  flex-wrap:        wrap !important;
  gap:              0.5rem !important;
  padding:          0.75rem 1.25rem !important;
  margin-top:       1.25rem !important;  /* space above, separating from content */
  /* Page background colour — looks detached from the white panel body */
  background:       var(--color-page-bg) !important;
  border-top:       1px solid var(--color-panel-border) !important;
  /* Negative margin pulls it flush to the acc-body padding edges */
  margin-left:      -1.25rem !important;
  margin-right:     -1.25rem !important;
  margin-bottom:    -1.25rem !important;
}

.acc-panel-footer .btn,
.acc-panel-footer a.btn {
  display:         inline-flex !important;
  align-items:     center !important;
  height:          34px !important;
  padding:         0 0.875rem !important;
  font-size:       var(--text-small) !important;
  font-weight:     var(--weight-medium) !important;
  border-radius:   4px !important;
  text-decoration: none !important;
  margin:          0 !important;
  white-space:     nowrap !important;
}

.acc-panel-footer .btn-primary,
.acc-panel-footer a.btn-primary {
  background: var(--color-primary) !important;
  border:     1px solid var(--color-primary-dark) !important;
  color:      #FFFFFF !important;
}

.acc-panel-footer .btn-primary:hover,
.acc-panel-footer a.btn-primary:hover {
  background: var(--color-primary-dark) !important;
  color:      #FFFFFF !important;
}

.acc-panel-footer .btn-warning,
.acc-panel-footer a.btn-warning {
  background: var(--color-warning) !important;
  border:     1px solid var(--color-warning-dark) !important;
  color:      #FFFFFF !important;
}

.acc-panel-footer .btn-secondary,
.acc-panel-footer a.btn-secondary {
  background:   #e7e7e7 !important;
  border:       1px solid #b9b9b9 !important;
  color:        #333333 !important;
}

.acc-panel-footer .btn-secondary:hover,
.acc-panel-footer a.btn-secondary:hover {
  background: #b9b9b9 !important;
  color:      #333333 !important;
}


/* ================================================================
   CSS-ONLY HELP MODAL
   Pure CSS modal using a hidden checkbox + label trick.
   No JavaScript. Accessible via keyboard (label is focusable).

   Structure:
     <span class="ph-help-trigger">
       <input type="checkbox" id="help-photo" class="ph-help-check">
       <label for="help-photo" class="ph-help-btn">?</label>
       <div class="ph-help-modal">
         <label for="help-photo" class="ph-help-close">✕</label>
         <p>Help text here.</p>
       </div>
     </span>

   The checkbox is hidden. Clicking the ? label toggles it.
   When checked, the modal becomes visible via the ~ sibling selector.
   Clicking ✕ unchecks it, closing the modal.
   ================================================================ */

/* Hide the actual checkbox */
.ph-help-check {
  position: absolute !important;
  opacity:  0 !important;
  width:    0 !important;
  height:   0 !important;
  margin:   0 !important;
  padding:  0 !important;
}

/* The ? bubble trigger */
.ph-help-btn {
  display:         inline-flex !important;
  align-items:     center !important;
  justify-content: center !important;
  width:           20px !important;
  height:          20px !important;
  border-radius:   50% !important;
  background:      var(--color-primary) !important;
  color:           #FFFFFF !important;
  font-size:       0.7rem !important;
  font-weight:     var(--weight-bold) !important;
  cursor:          pointer !important;
  user-select:     none !important;
  vertical-align:  middle !important;
  margin-left:     0.3rem !important;
  flex-shrink:     0 !important;
  line-height:     1 !important;
  transition:      background 0.15s ease !important;
}

.ph-help-btn:hover {
  background: var(--color-primary-dark) !important;
}

/* Modal overlay + box — hidden by default */
.ph-help-modal {
  display:  none !important;
  position: fixed !important;
  top:      0 !important;
  left:     0 !important;
  width:    100% !important;
  height:   100% !important;
  z-index:  10000 !important;
  /* Semi-transparent backdrop */
  background: rgba(0, 0, 0, 0.45) !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Show modal when checkbox is checked */
.ph-help-check:checked ~ .ph-help-modal {
  display: flex !important;
}

/* The actual modal card */
.ph-help-modal-inner {
  background:    var(--color-panel-bg) !important;
  border:        1px solid var(--color-panel-border) !important;
  border-radius: 6px !important;
  box-shadow:    0 8px 32px rgba(0, 0, 0, 0.18) !important;
  padding:       1.5rem !important;
  max-width:     480px !important;
  width:         90% !important;
  position:      relative !important;
}

/* Close button inside modal */
.ph-help-close {
  position:  absolute !important;
  top:       0.75rem !important;
  right:     0.875rem !important;
  font-size: 1rem !important;
  color:     var(--color-text-muted) !important;
  cursor:    pointer !important;
  line-height: 1 !important;
  padding:   0.25rem !important;
}

.ph-help-close:hover {
  color: var(--color-text-primary) !important;
}

.ph-help-modal-inner h5 {
  font-size:     var(--text-h5) !important;
  font-weight:   var(--weight-semibold) !important;
  color:         var(--color-text-heading) !important;
  margin-bottom: 0.75rem !important;
  padding-right: 1.5rem !important;   /* clear the close button */
}

.ph-help-modal-inner p {
  font-size:   var(--text-body) !important;
  color:       var(--color-text-primary) !important;
  line-height: var(--leading-body) !important;
  margin:      0 !important;
}

/* Wrapper span — keeps trigger inline with surrounding text */
.ph-help-trigger {
  display:     inline-flex !important;
  align-items: center !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   Section 23 — Vacancy report badges & highlights
   Used in list_units_by_property_past_vacancies_time.php
        and list_units_by_property_past_vacancies_cost.php
   ══════════════════════════════════════════════════════════════════════════ */

/* Traffic-light badge for Days/Month (time report) */
.dpm-badge {
    display: inline-block;
    padding: 0.18em 0.65em;
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.875rem;
    line-height: 1.4;
    min-width: 2.5rem;
    text-align: center;
}
.dpm-green { background: #d1fae5; color: #065f46; }   /* <= 1.0  efficient  */
.dpm-amber { background: #fef3c7; color: #92400e; }   /* 1.1–2.5 moderate   */
.dpm-red   { background: #fee2e2; color: #991b1b; }   /* > 2.5   slow       */
.dpm-none  { color: var(--color-text-muted); font-size: 0.8rem; }

/* Cost/Month highlight — teal bold; no traffic-light since thresholds vary by property */
.cpm-value {
    font-weight: 700;
    color: var(--color-primary);
}

/* ══════════════════════════════════════════════════════════════════════════
   Section 24 — Detail page layout (unittask, tradie, task, unit left col)
   Hero value + label/value grid pattern used across all detail pages
   ══════════════════════════════════════════════════════════════════════════ */

/* Hero — primary value at top of each column (address, task name, etc.) */
.detail-hero {
    font-size: 1.2rem;
    font-weight: var(--weight-semibold);
    color: var(--color-primary);   /* #008CBA bright teal — clearly distinct from body text */
}

/* Label / value grid */
.detail-rows {
    display: grid;
    grid-template-columns: 110px 1fr;
    row-gap: 0.4rem;
    align-items: baseline;
    margin-top: 1rem;
}
.detail-label {
    font-size: var(--text-small);
    color: var(--color-text-muted);
    font-weight: var(--weight-medium);
    padding-right: 0.5rem;
}
.detail-value {
    font-size: var(--text-base);
    color: var(--color-text);
}

/* Key person field (occupant, owner) — stands out within detail-rows */
.detail-value--key {
    color: var(--color-primary);
    font-weight: var(--weight-medium);
}

/* ================================================================
   Section 25 — Flash message banners (replaces Foundation alert-box)
   ================================================================ */
.alert-box {
  padding:       0.75rem 1.25rem;
  margin-bottom: 1.25rem;
  border-radius: 4px;
  font-size:     var(--text-base);
  font-weight:   var(--weight-medium);
}
.alert-box.success {
  background: #dff4e8;
  border:     1px solid var(--color-success-dark);
  color:      #1e5c36;
}
.alert-box.warning {
  background: #fef3e2;
  border:     1px solid var(--color-warning-dark);
  color:      #7a4a00;
}
.alert-box.info {
  background: #e8f4fc;
  border:     1px solid #2196a8;
  color:      #0d4a6e;
}
.alert-box.alert {
  background: #fde8e4;
  border:     1px solid var(--color-alert-dark);
  color:      #7a1a0a;
}

/* ================================================================
   26. PAGE PATTERNS
   Reusable structural styles for specific page types.
   These eliminate the need for per-page <style> blocks on
   common page patterns such as delete warning pages.
   ================================================================ */

/* ── Delete warning pages ──────────────────────────────────────────────────

   Usage:
     <div class="panel delete-warning-panel"> ... </div>
     <div class="footer-bar"> Cancel | Confirm Delete </div>

   The adjacent-sibling rule automatically sizes and centres the
   footer bar to match the panel — no extra class needed on the
   footer bar, and no per-page <style> block required.

   ─────────────────────────────────────────────────────────────────────── */
.delete-warning-panel {
  max-width:    560px;
  margin-left:  auto;
  margin-right: auto;
}

.delete-warning-panel + .footer-bar {
  max-width:    560px;
  margin-left:  auto;
  margin-right: auto;
}

/* ================================================================
   27. PRINT PLAN PAGE
   Full-plan print view (print_plan.php).
   No sidebar. Designed for right-click > Save as PDF.
   A4 page width, screen-accurate layout.
   ================================================================ */

/* ── Page shell ───────────────────────────────────────────────── */

.print-body {
  background: #ffffff;
  color:      var(--color-text-primary);
  font-family: var(--font-base);
}

.print-page {
  max-width:    794px;          /* ~A4 at 96 dpi */
  margin:       0 auto;
  padding:      32px 40px 48px;
}


/* ── Cover block ──────────────────────────────────────────────── */

.print-cover {
  text-align:    center;
  padding:       1rem 0 0.75rem;
  margin-bottom: 1rem;
  border-bottom: 3px solid var(--color-text-heading);
}

.print-cover-label {
  font-size:     var(--text-h3);
  font-weight:   var(--weight-bold);
  color:         var(--color-text-heading);
  letter-spacing: var(--tracking-h3);
  margin-bottom: 0.35rem;
}

.print-cover-property {
  font-size:   var(--text-h4);
  font-weight: var(--weight-semibold);
  color:       var(--color-primary);
}


/* ── Property photo ───────────────────────────────────────────── */

.print-photo {
  text-align:    center;
  margin-bottom: 1rem;
}

.print-photo img {
  max-width:  100%;
  max-height: 360px;
  object-fit: contain;
  border:     1px solid var(--color-border);
  border-radius: 4px;
}


/* ── Section block ────────────────────────────────────────────── */

.print-section {
  margin-bottom: 0.75rem;
}

.print-section-title {
  font-size:     var(--text-h5);
  font-weight:   var(--weight-semibold);
  color:         var(--color-text-heading);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 0.2rem;
  margin-bottom: 0.5rem;
}


/* ── Info key/value grid ──────────────────────────────────────── */

.print-info-grid {
  display:               grid;
  grid-template-columns: 160px 1fr;
  gap:                   0.2rem 0.75rem;
  align-items:           baseline;
}

.print-info-label {
  font-size:   var(--text-small);
  font-weight: var(--weight-medium);
  color:       var(--color-text-muted);
}

.print-info-value {
  font-size: var(--text-body);
  color:     var(--color-text-primary);
}


/* ── Horizontal rule ──────────────────────────────────────────── */

.print-divider {
  border:     none;
  border-top: 1px solid var(--color-divider);
  margin:     1rem 0;
}


/* ── Disclaimer — plain text, no card ────────────────────────── */

.print-disclaimer {
  font-size:   var(--text-small);
  color:       var(--color-text-muted);
  line-height: 1.6;
}


/* ── Centre heading (section label) ──────────────────────────── */

.print-center-heading {
  text-align:    center;
  font-size:     var(--text-h5);
  font-weight:   var(--weight-semibold);
  color:         var(--color-text-heading);
  margin:        1.25rem 0 0.75rem;
}


/* ── Element block ────────────────────────────────────────────── */

.print-element {
  margin-bottom: 1rem;
  page-break-inside: avoid;
}

.print-element-header {
  background:    #eef5fa;
  padding:       0.35rem 0.75rem;
  border-left:   3px solid var(--color-primary);
  border-radius: 0 4px 4px 0;
  margin-bottom: 0.5rem;
}

.print-element-name {
  font-size:   var(--text-body);
  font-weight: var(--weight-semibold);
  color:       var(--color-text-heading);
}

.print-element-description {
  font-size:    var(--text-body);
  color:        var(--color-text-primary);
  line-height:  1.6;
  margin-bottom: 0.5rem;
}


/* ── Job header label ─────────────────────────────────────────── */

.print-job-header {
  font-size:   var(--text-small);
  font-weight: var(--weight-medium);
  color:       var(--color-text-heading);
  margin:      0.75rem 0 0.3rem;
}


/* ── Job cost table ───────────────────────────────────────────── */
/*
   11 columns (label + 10 years). Font is small to keep all
   columns on one row at A4 width.
*/

.print-job-table {
  width:           100%;
  border-collapse: collapse;
  margin-bottom:   0.5rem;
  font-size:       0.68rem;
  page-break-inside: avoid;
}

.print-job-table thead tr {
  background: var(--color-text-heading);
}

.print-job-table th {
  color:       #ffffff;
  font-weight: var(--weight-medium);
  padding:     0.25rem 0.3rem;
  text-align:  right;
  white-space: nowrap;
}

.print-job-table th:first-child {
  text-align: left;
  width:       22%;
}

.print-job-table td {
  text-align:  right;
  padding:     0.2rem 0.3rem;
  border-bottom: 1px solid var(--color-divider);
  color:       var(--color-text-primary);
  white-space: nowrap;
}

.print-job-table td:first-child {
  text-align: left;
}

.print-job-table tbody tr:nth-child(even) {
  background: #f7f7f5;
}


/* ── Provisional-estimates note ───────────────────────────────── */

.print-note {
  font-size:     var(--text-small);
  color:         var(--color-text-muted);
  font-style:    italic;
  margin-bottom: 1rem;
  line-height:   1.5;
}


/* ── End-of-report footer note ────────────────────────────────── */

.print-footer-note {
  text-align:  center;
  font-size:   var(--text-small);
  color:       var(--color-text-muted);
  margin-top:  2rem;
  padding-top: 1rem;
  border-top:  1px solid var(--color-border);
}


/* ── @media print overrides ───────────────────────────────────── */
/*
   When the user actually triggers File > Print (rather than
   right-click > Save as PDF), these rules ensure ink-friendly
   output: no background fills, native page breaks respected.
*/

@media print {
  .print-body {
    background: #ffffff;
  }

  .print-page {
    max-width: none;
    padding:   10mm 12mm;
  }

  .print-element,
  .print-job-table,
  .print-section {
    page-break-inside: avoid;
  }

  .print-center-heading,
  .print-section-title {
    page-break-after: avoid;
  }

  .print-element-header {
    background:  #eef5fa !important;  /* keep tint even in print */
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .print-job-table thead tr {
    background: var(--color-text-heading) !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}