/* ============================================================
   DIGNITY BRAND — CREMATORIUM PRICE UPDATE TOOL
   Stylesheet: style.css
   Last updated: 2025
   ============================================================

   BRAND COLOURS (from Brand Guidelines v17, 23.09.22):
     Dark Navy  #0E2244  — CMYK 95,72,15,57   PMS 533
     Mid Blue   #004976  — CMYK 100,69,29,14  PMS 7693
     Steel Blue #355870  — CMYK 82,55,36,24   PMS 5405
     Teal       #429EA6  — CMYK 72,18,35,2    PMS 5483  (accent)
     Grey       #AFB6BD  — CMYK 21,11,9,23    PMS 429
     Off White  #F8F2F3  — CMYK 3,6,4,0       PMS 691

   FONTS (from Brand Guidelines v17, 23.09.22):
     Primary   — Gotham        (Book / Medium / Bold)
     Secondary — Chronicle Text G1 (Roman)

   FONT LOADING:
     Both typefaces are loaded from assets/fonts/ using @font-face.
     The font files are commercially licensed — do not redistribute.
   ============================================================ */


/* ============================================================
   SECTION 1 — FONT IMPORT
   Loads Montserrat (Gotham substitute) and Lora (Chronicle Text
   substitute) from Google Fonts. Remove this line and add your
   own @font-face rules if switching to the licensed brand fonts.
   ============================================================ */

/*
 * ── LICENSED BRAND FONTS ───────────────────────────────────
 * Gotham and Chronicle Text G1 are loaded from the local
 * assets/fonts/ folder. These are commercially licensed — do
 * not redistribute the font files.
 *
 * For each font, the browser picks the best format it supports:
 *   woff2 — best compression, all modern browsers (preferred)
 *   woff  — good support, older modern browsers
 *   ttf   — fallback for older browsers
 *
 * font-display: swap — shows system font while loading, then
 * swaps in the brand font once it arrives. Prevents blank text.
 */

/* Gotham Book — used for body-weight UI labels and captions */
@font-face {
  font-family:  'Gotham';
  src: url('assets/fonts/Gotham-Book.woff2') format('woff2'),
       url('assets/fonts/Gotham-Book.woff')  format('woff'),
       url('assets/fonts/Gotham-Book.ttf')   format('truetype');
  font-weight:  400;
  font-style:   normal;
  font-display: swap;
}

/* Gotham Medium — used for semi-bold emphasis */
@font-face {
  font-family:  'Gotham';
  src: url('assets/fonts/Gotham-Medium.woff2') format('woff2'),
       url('assets/fonts/Gotham-Medium.woff')  format('woff'),
       url('assets/fonts/Gotham-Medium.ttf')   format('truetype');
  font-weight:  500;
  font-style:   normal;
  font-display: swap;
}

/* Gotham Bold — used for headings, buttons and badges */
@font-face {
  font-family:  'Gotham';
  src: url('assets/fonts/Gotham-Bold.woff2') format('woff2'),
       url('assets/fonts/Gotham-Bold.woff')  format('woff'),
       url('assets/fonts/Gotham-Bold.ttf')   format('truetype');
  font-weight:  700;
  font-style:   normal;
  font-display: swap;
}

/* Chronicle Text G1 Roman — used for body text and form inputs */
@font-face {
  font-family:  'Chronicle Text G1';
  src: url('assets/fonts/ChroniclTextG1-Roman.woff2') format('woff2'),
       url('assets/fonts/ChroniclTextG1-Roman.woff')  format('woff'),
       url('assets/fonts/ChroniclTextG1-Roman.ttf')   format('truetype');
  font-weight:  400;
  font-style:   normal;
  font-display: swap;
}


/* ============================================================
   SECTION 2 — CSS CUSTOM PROPERTIES
   All brand colours and shared design tokens live here.
   Edit these values to update the entire site in one place.
   ============================================================ */

:root {
  /* ── Dignity Brand Colours ─────────────────────────────── */
  --colour-navy:       #0E2244;   /* Primary — dark navy        */
  --colour-mid-blue:   #004976;   /* Secondary — mid blue       */
  --colour-steel:      #355870;   /* Tertiary — steel blue      */
  --colour-teal:       #429EA6;   /* Accent — teal              */
  --colour-grey:       #AFB6BD;   /* Supporting — grey          */
  --colour-off-white:  #F8F2F3;   /* Light background — off white */
  --colour-white:      #FFFFFF;
  --colour-text:       #1A1A2E;   /* Near-black for body text   */
  --colour-text-muted: #5A6478;   /* Muted text / labels        */
  --colour-error:      #B91C1C;   /* Error states               */
  --colour-success:    #166534;   /* Success states             */
  --colour-success-bg: #F0FDF4;

  /* ── Typography ────────────────────────────────────────── */
  --font-primary:   'Gotham', 'Arial', sans-serif;            /* Brand primary font   */
  --font-secondary: 'Chronicle Text G1', 'Times New Roman', serif; /* Brand secondary font */

  /* ── Spacing & Layout ──────────────────────────────────── */
  --radius:     8px;
  --radius-lg:  12px;
  --shadow:     0 2px 16px rgba(14, 34, 68, 0.08);
  --shadow-md:  0 4px 24px rgba(14, 34, 68, 0.12);
}


/* ============================================================
   SECTION 3 — GLOBAL RESET & BASE
   Removes browser default spacing and sets consistent
   box-sizing across all elements.
   ============================================================ */

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family:      var(--font-primary);
  font-weight:      400;
  background-color: var(--colour-off-white);
  color:            var(--colour-text);
  min-height:       100vh;
  line-height:      1.6;
  -webkit-font-smoothing: antialiased;
}


/* ============================================================
   SECTION 4 — TYPOGRAPHY
   Headings use the primary (Gotham/Montserrat) typeface.
   Body text uses the secondary (Chronicle Text/Lora) typeface
   in line with digital brand guidelines.
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary);
  font-weight: 700;
  line-height: 1.2;
  color:       var(--colour-navy);
}

p,
li {
  font-family: var(--font-secondary);
  font-size:   0.95rem;
  color:       var(--colour-text);
}

a {
  color:           var(--colour-teal);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}


/* ============================================================
   SECTION 5 — PAGE LAYOUT
   Centres the main content and adds consistent padding.
   Used by index.html (public form).
   ============================================================ */

.page {
  max-width: 860px;
  margin:    0 auto;
  padding:   36px 20px 60px;
}


/* ============================================================
   SECTION 6 — SITE HEADER (Public Form)
   Dark navy header bar with the Dignity brand colour as
   background. Sits above the form on index.html.
   ============================================================ */

.site-header {
  background:    var(--colour-navy);
  padding:       36px 24px 30px;
  text-align:    center;
  border-bottom: 3px solid var(--colour-teal);   /* Teal accent line */
}

/* Dignity logo — white version, displayed in the site header */
.site-header img {
  height:        126px;
  margin-bottom: 16px;
  display:       block;
  margin-left:   auto;
  margin-right:  auto;
}

/* Main page title */
.site-header h1 {
  font-family:    var(--font-primary);
  font-size:      1.8rem;
  font-weight:    700;
  color:          var(--colour-white);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Subtitle / instruction text below the heading */
.site-header p {
  font-family: var(--font-secondary);
  color:       rgba(255, 255, 255, 0.65);
  font-size:   0.9rem;
  margin-top:  8px;
}


/* ============================================================
   SECTION 7 — FORM CARDS
   White rounded card containers that hold form fields.
   The shadow gives depth against the off-white background.
   ============================================================ */

.card {
  background:    var(--colour-white);
  border-radius: var(--radius-lg);
  box-shadow:    var(--shadow);
  margin-bottom: 20px;
  overflow:      hidden;
}

/* Inner padding for the card body area */
.card-body {
  padding: 28px 32px;
}


/* ============================================================
   SECTION 8 — FORM LABELS
   Labels follow Gotham Book styling — small, uppercase,
   with generous letter-spacing for readability.
   The .req class adds a teal asterisk to mark required fields.
   ============================================================ */

label {
  display:        block;
  font-family:    var(--font-primary);
  font-size:      0.75rem;
  font-weight:    600;
  color:          var(--colour-navy);
  margin-bottom:  7px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

/* Required field marker — appends a teal asterisk */
.req::after {
  content: ' *';
  color:   var(--colour-teal);
}

/* Small helper text displayed below an input field */
.help {
  display:        block;
  font-family:    var(--font-secondary);
  font-size:      0.78rem;
  color:          var(--colour-text-muted);
  margin-top:     5px;
  font-weight:    400;
  text-transform: none;
  letter-spacing: 0;
}


/* ============================================================
   SECTION 9 — FORM INPUTS & SELECT DROPDOWNS
   All input types and select elements share a consistent style.
   Focus state uses the brand teal for the border/ring.
   The .error class applies a red border for validation errors.
   ============================================================ */

input[type="text"],
input[type="email"],
input[type="number"],
input[type="time"],
select {
  width:          100%;
  padding:        11px 14px;
  border:         2px solid var(--colour-grey);
  border-radius:  var(--radius);
  font-family:    var(--font-secondary);
  font-size:      0.95rem;
  color:          var(--colour-text);
  background:     var(--colour-white);
  outline:        none;
  transition:     border-color 0.2s, box-shadow 0.2s;
  appearance:     none;
  -webkit-appearance: none;
}

/* Focus state — teal border with subtle glow ring */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="time"]:focus,
select:focus {
  border-color: var(--colour-teal);
  box-shadow:   0 0 0 3px rgba(66, 158, 166, 0.15);
}

/* Error state — red border for failed validation */
input.error,
select.error {
  border-color: var(--colour-error);
}

/* Remove number input spinner arrows */
input[type="number"] {
  -moz-appearance: textfield;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

/* Custom dropdown arrow for select elements */
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 fill='%230E2244' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right 14px center;
  padding-right:       38px;
  cursor:              pointer;
}


/* ============================================================
   SECTION 10 — FORM GROUPS & ROW LAYOUTS
   .form-group wraps each label + input pair.
   .form-row and .form-row-3 create 2- and 3-column grids.
   ============================================================ */

/* Standard single field wrapper */
.form-group {
  margin-bottom: 22px;
}

/* Remove bottom margin from the last group in a container */
.form-group:last-child {
  margin-bottom: 0;
}

/* Two-column grid layout */
.form-row {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   18px;
}

/* Three-column grid layout */
.form-row-3 {
  display:               grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:                   18px;
}


/* ============================================================
   SECTION 11 — TIME INPUT FIELDS
   Horizontal layout for "from time" and "to time" inputs
   with a separator label ("until") between them.
   ============================================================ */

.time-wrap {
  display:     flex;
  align-items: center;
  gap:         12px;
}

/* Each time input grows to fill available space */
.time-wrap input[type="time"] {
  flex: 1;
}

/* The "until" separator text */
.time-sep {
  font-family:  var(--font-primary);
  font-size:    0.8rem;
  font-weight:  500;
  color:        var(--colour-text-muted);
  white-space:  nowrap;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}


/* ============================================================
   SECTION 12 — SECTION DIVIDERS
   Horizontal rule with a label that separates the subsections
   within each crematorium card (Standard / Unattended / Reduced).
   The teal colour is used for the divider line.
   ============================================================ */

.section-divider {
  display:     flex;
  align-items: center;
  gap:         14px;
  margin:      30px 0 20px;
}

/* Section heading text (e.g. "Standard Price") */
.section-divider span {
  font-family:    var(--font-primary);
  font-size:      0.72rem;
  font-weight:    700;
  color:          var(--colour-teal);
  white-space:    nowrap;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* Line that extends to the right of the heading */
.section-divider::after {
  content:    '';
  flex:       1;
  height:     1px;
  background: linear-gradient(to right, var(--colour-grey), transparent);
}


/* ============================================================
   SECTION 13 — CREMATORIUM ACCORDION CARDS
   Each crematorium (1–7) is shown as a collapsible card.
   The header (dark navy bar) toggles the body open/closed.
   A teal badge shows the crematorium number.
   Optional crematoriums (2–7) include a "Remove" button.
   ============================================================ */

.crem-card {
  border-radius: var(--radius-lg);
  overflow:      hidden;
  box-shadow:    var(--shadow);
  margin-bottom: 20px;
}

/* ── Card header (clickable toggle bar) ─────────────────── */
.crem-head {
  background:      var(--colour-navy);
  color:           var(--colour-white);
  padding:         16px 24px;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  cursor:          pointer;
  user-select:     none;
  transition:      background 0.15s;
}

.crem-head:hover {
  background: var(--colour-mid-blue);
}

/* Left side of the header — badge + crematorium name */
.crem-head-left {
  display:     flex;
  align-items: center;
  gap:         14px;
}

/* Teal pill badge showing "Crematorium N" */
.crem-badge {
  background:     var(--colour-teal);
  color:          var(--colour-white);
  font-family:    var(--font-primary);
  font-size:      0.7rem;
  font-weight:    700;
  padding:        4px 12px;
  border-radius:  20px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  white-space:    nowrap;
}

/* The selected crematorium name shown in the header */
.crem-name-preview {
  font-family: var(--font-secondary);
  font-style:  italic;
  font-size:   1rem;
  color:       rgba(255, 255, 255, 0.75);
}

/* Right side of the header — remove button + chevron */
.crem-head-right {
  display:     flex;
  align-items: center;
  gap:         12px;
}

/* Remove button (visible on optional crematoriums 2–7) */
.btn-remove {
  background:  rgba(255, 255, 255, 0.1);
  color:       var(--colour-white);
  border:      1px solid rgba(255, 255, 255, 0.2);
  border-radius: 5px;
  padding:     4px 12px;
  font-family: var(--font-primary);
  font-size:   0.75rem;
  font-weight: 600;
  cursor:      pointer;
  transition:  background 0.15s;
}

.btn-remove:hover {
  background:   rgba(185, 28, 28, 0.5);
  border-color: transparent;
}

/* Chevron arrow — rotates when card is collapsed */
.toggle-chevron {
  font-size:  0.85rem;
  transition: transform 0.2s ease;
}

/* Rotate chevron when card is in collapsed state */
.crem-card.collapsed .toggle-chevron {
  transform: rotate(-90deg);
}

/* ── Card body (the form fields area) ───────────────────── */
.crem-body {
  background: var(--colour-white);
  padding:    28px 32px;
}

/* Hide the body when card is collapsed */
.crem-card.collapsed .crem-body {
  display: none;
}


/* ============================================================
   SECTION 14 — CONDITIONAL FIELDS
   Fields that show or hide depending on user selections
   (e.g. singular vs range price, reduced required yes/no).
   JavaScript toggles the .visible class on/off.
   ============================================================ */

/* Hidden by default — JS adds .visible to reveal */
.conditional {
  display: none;
}

.conditional.visible {
  display: block;
}


/* ============================================================
   SECTION 15 — ADD CREMATORIUM BUTTON
   Dashed-border button that adds an additional crematorium
   section (up to a maximum of 7). Disabled when max reached.
   ============================================================ */

.add-crem-wrap {
  text-align: center;
  margin:     24px 0;
}

.btn-add {
  background:    transparent;
  border:        2px dashed var(--colour-grey);
  color:         var(--colour-navy);
  border-radius: var(--radius-lg);
  padding:       14px 32px;
  font-family:   var(--font-primary);
  font-size:     0.9rem;
  font-weight:   600;
  letter-spacing: 0.04em;
  cursor:        pointer;
  width:         100%;
  transition:    background 0.2s, border-color 0.2s;
}

.btn-add:hover {
  background:   rgba(66, 158, 166, 0.06);
  border-color: var(--colour-teal);
  color:        var(--colour-teal);
}

/* Greyed out when maximum (7) crematoriums have been added */
.btn-add:disabled {
  opacity: 0.35;
  cursor:  not-allowed;
}


/* ============================================================
   SECTION 16 — SUBMIT BUTTON & ACTION AREA
   Dark navy submit button with hover state.
   Centred below the crematorium sections.
   ============================================================ */

.submit-section {
  text-align: center;
  margin-top: 32px;
}

.btn-submit {
  background:     var(--colour-navy);
  color:          var(--colour-white);
  border:         none;
  border-radius:  var(--radius-lg);
  padding:        16px 60px;
  font-family:    var(--font-primary);
  font-size:      0.9rem;
  font-weight:    700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor:         pointer;
  transition:     background 0.2s, transform 0.1s;
}

.btn-submit:hover {
  background: var(--colour-mid-blue);
}

.btn-submit:active {
  transform: scale(0.98);
}

/* Greyed out while form is submitting */
.btn-submit:disabled {
  opacity: 0.55;
  cursor:  not-allowed;
}

/* Small note text below the submit button */
.submit-note {
  font-family: var(--font-secondary);
  font-size:   0.82rem;
  color:       var(--colour-text-muted);
  margin-top:  10px;
}


/* ============================================================
   SECTION 17 — FEEDBACK MESSAGES
   Inline messages shown below the submit button.
   .error — red, shown when validation fails or server errors.
   .success — green, shown after a successful submission.
   .hidden — utility class to hide any element via JS.
   ============================================================ */

.msg {
  border-radius: var(--radius-lg);
  padding:       16px 20px;
  margin-top:    20px;
  font-family:   var(--font-secondary);
  font-size:     0.9rem;
  text-align:    left;
}

/* Error message styling */
.msg.error {
  background:   #FEF2F2;
  color:        var(--colour-error);
  border:       1px solid #FECACA;
}

/* Success message styling — shown after submission */
.msg.success {
  background:  var(--colour-success-bg);
  color:       var(--colour-success);
  border:      1px solid #BBF7D0;
  text-align:  center;
  padding:     36px 24px;
}

.msg.success h2 {
  font-family:  var(--font-primary);
  font-size:    1.6rem;
  font-weight:  700;
  color:        var(--colour-success);
  margin-bottom: 8px;
}

/* Hides any element — toggled by JavaScript */
.hidden {
  display: none !important;
}


/* ============================================================
   SECTION 18 — LOADING SPINNER
   Circular animation shown inside the submit button while
   the form is being processed.
   ============================================================ */

.spinner {
  display:          inline-block;
  width:            16px;
  height:           16px;
  border:           2px solid rgba(255, 255, 255, 0.35);
  border-top-color: var(--colour-white);
  border-radius:    50%;
  animation:        spin 0.7s linear infinite;
  vertical-align:   middle;
  margin-right:     8px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}


/* ============================================================
   SECTION 19 — ADMIN: LOGIN PAGE
   Covers the full viewport with a dark navy gradient.
   The login card is centred with the form inside.
   ============================================================ */

/* Full-page login wrapper */
.login-wrap {
  min-height:      100vh;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      linear-gradient(145deg, var(--colour-navy) 0%, var(--colour-mid-blue) 100%);
  padding:         20px;
}

/* White card holding the login form */
.login-box {
  background:    var(--colour-white);
  border-radius: var(--radius-lg);
  padding:       48px;
  width:         100%;
  max-width:     420px;
  box-shadow:    0 24px 64px rgba(0, 0, 0, 0.3);
  text-align:    center;
}

.login-box h1 {
  font-size:      1.8rem;
  font-weight:    700;
  color:          var(--colour-navy);
  margin-bottom:  4px;
}

.login-box p {
  font-family:   var(--font-secondary);
  color:         var(--colour-text-muted);
  font-size:     0.9rem;
  margin-bottom: 32px;
}

/* Teal decorative line under the heading */
.login-box .login-rule {
  width:        40px;
  height:       2px;
  background:   var(--colour-teal);
  margin:       10px auto 24px;
}

/* Password input field */
.login-box input[type="password"] {
  width:         100%;
  padding:       13px 16px;
  border:        2px solid var(--colour-grey);
  border-radius: var(--radius);
  font-family:   var(--font-secondary);
  font-size:     1rem;
  outline:       none;
  margin-bottom: 14px;
  transition:    border-color 0.2s;
}

.login-box input[type="password"]:focus {
  border-color: var(--colour-teal);
  box-shadow:   0 0 0 3px rgba(66, 158, 166, 0.15);
}

/* Login submit button */
.btn-login {
  width:          100%;
  padding:        13px;
  background:     var(--colour-navy);
  color:          var(--colour-white);
  border:         none;
  border-radius:  var(--radius);
  font-family:    var(--font-primary);
  font-size:      0.85rem;
  font-weight:    700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor:         pointer;
  transition:     background 0.2s;
}

.btn-login:hover {
  background: var(--colour-mid-blue);
}

/* Error / timeout alert boxes on the login page */
.error-msg {
  background:    #FEF2F2;
  color:         var(--colour-error);
  border:        1px solid #FECACA;
  border-radius: var(--radius);
  padding:       10px 14px;
  font-family:   var(--font-secondary);
  font-size:     0.88rem;
  margin-bottom: 14px;
  text-align:    left;
}

.timeout-msg {
  background:    #FFFBEB;
  color:         #92400E;
  border:        1px solid #FDE68A;
  border-radius: var(--radius);
  padding:       10px 14px;
  font-family:   var(--font-secondary);
  font-size:     0.88rem;
  margin-bottom: 14px;
  text-align:    left;
}


/* ============================================================
   SECTION 20 — ADMIN: DASHBOARD HEADER
   Sticky navigation bar shown at the top of the admin area.
   Contains the page title, CSV export button and logout link.
   ============================================================ */

.dash-header {
  background:      var(--colour-navy);
  color:           var(--colour-white);
  padding:         0 32px;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  height:          64px;
  position:        sticky;
  top:             0;
  z-index:         100;
  box-shadow:      0 2px 12px rgba(0, 0, 0, 0.2);
  border-bottom:   2px solid var(--colour-teal);
}

/* Dashboard page title */
.dash-header h1 {
  font-family:    var(--font-primary);
  font-size:      1.1rem;
  font-weight:    700;
  color:          var(--colour-white);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Right-hand side container for action buttons */
.dash-header-right {
  display:     flex;
  align-items: center;
  gap:         16px;
}

/* Teal "Download CSV" button in the header */
.btn-export {
  background:     var(--colour-teal);
  color:          var(--colour-white);
  border:         none;
  border-radius:  var(--radius);
  padding:        9px 18px;
  font-family:    var(--font-primary);
  font-size:      0.78rem;
  font-weight:    700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor:         pointer;
  text-decoration: none;
  display:        inline-flex;
  align-items:    center;
  gap:            6px;
  transition:     background 0.2s;
}

.btn-export:hover {
  background:      var(--colour-steel);
  text-decoration: none;
}

/* Ghost "Log out" button in the header */
.btn-logout {
  background:  transparent;
  color:       rgba(255, 255, 255, 0.7);
  border:      1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius);
  padding:     7px 14px;
  font-family: var(--font-primary);
  font-size:   0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor:      pointer;
  text-decoration: none;
  transition:  all 0.2s;
}

.btn-logout:hover {
  color:           var(--colour-white);
  border-color:    var(--colour-white);
  text-decoration: none;
}


/* ============================================================
   SECTION 21 — ADMIN: STATS CARDS
   Row of summary cards at the top of the dashboard showing
   total submissions, today's count, and most recent date.
   Left border uses the teal brand accent.
   ============================================================ */

/* Dashboard content area */
.dash-body {
  padding:   32px;
  max-width: 1400px;
  margin:    0 auto;
}

/* Grid container for the stat cards */
.stats-row {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap:                   16px;
  margin-bottom:         28px;
}

/* Individual stat card */
.stat-card {
  background:    var(--colour-white);
  border-radius: var(--radius-lg);
  padding:       20px 24px;
  box-shadow:    var(--shadow);
  border-left:   4px solid var(--colour-teal);
}

/* Small uppercase label (e.g. "Total Submissions") */
.stat-card .label {
  font-family:    var(--font-primary);
  font-size:      0.7rem;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color:          var(--colour-text-muted);
  margin-bottom:  8px;
}

/* Large number / date value */
.stat-card .value {
  font-family: var(--font-primary);
  font-size:   2rem;
  font-weight: 700;
  color:       var(--colour-navy);
  line-height: 1.1;
}


/* ============================================================
   SECTION 22 — ADMIN: SEARCH BAR
   Search input and button above the submissions table.
   Allows filtering by email address, date, or crematorium name.
   ============================================================ */

.search-row {
  display:     flex;
  align-items: center;
  gap:         12px;
  margin-bottom: 20px;
}

/* Search form wrapper — stretches to fill the row */
.search-row form {
  display: flex;
  flex:    1;
  gap:     10px;
}

/* Search text input */
.search-row input[type="text"] {
  flex:          1;
  padding:       10px 16px;
  border:        2px solid var(--colour-grey);
  border-radius: var(--radius);
  font-family:   var(--font-secondary);
  font-size:     0.95rem;
  outline:       none;
  background:    var(--colour-white);
  transition:    border-color 0.2s;
}

.search-row input[type="text"]:focus {
  border-color: var(--colour-teal);
  box-shadow:   0 0 0 3px rgba(66, 158, 166, 0.15);
}

/* Navy search submit button */
.btn-search {
  padding:        10px 20px;
  background:     var(--colour-navy);
  color:          var(--colour-white);
  border:         none;
  border-radius:  var(--radius);
  font-family:    var(--font-primary);
  font-size:      0.78rem;
  font-weight:    700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor:         pointer;
  transition:     background 0.2s;
}

.btn-search:hover {
  background: var(--colour-mid-blue);
}

/* "Clear" link that removes the active search filter */
.btn-clear {
  padding:       10px 16px;
  background:    var(--colour-off-white);
  border:        2px solid var(--colour-grey);
  border-radius: var(--radius);
  font-family:   var(--font-primary);
  font-size:     0.78rem;
  font-weight:   600;
  color:         var(--colour-text-muted);
  cursor:        pointer;
  text-decoration: none;
  transition:    border-color 0.2s;
}

.btn-clear:hover {
  border-color:    var(--colour-steel);
  text-decoration: none;
}


/* ============================================================
   SECTION 23 — ADMIN: SUBMISSIONS TABLE
   Displays all form submissions in a paginated data table.
   Table header uses the dark navy background.
   Row hover shows a subtle off-white highlight.
   ============================================================ */

/* White rounded container */
.table-wrap {
  background:    var(--colour-white);
  border-radius: var(--radius-lg);
  box-shadow:    var(--shadow);
  overflow:      hidden;
}

table {
  width:           100%;
  border-collapse: collapse;
  font-size:       0.9rem;
}

/* Header row */
thead {
  background: var(--colour-navy);
  color:      var(--colour-white);
}

thead th {
  padding:        14px 18px;
  text-align:     left;
  font-family:    var(--font-primary);
  font-size:      0.7rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space:    nowrap;
}

/* Body rows */
tbody tr {
  border-bottom: 1px solid var(--colour-off-white);
  transition:    background 0.15s;
}

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

tbody tr:hover {
  background: #F5F8FA;
}

tbody td {
  padding:        14px 18px;
  vertical-align: middle;
  font-family:    var(--font-secondary);
}

/* Blue pill showing how many crematoriums are in a submission */
.badge-count {
  display:       inline-block;
  background:    var(--colour-navy);
  color:         var(--colour-white);
  border-radius: 20px;
  padding:       3px 11px;
  font-family:   var(--font-primary);
  font-size:     0.72rem;
  font-weight:   700;
}

/* "View" button to open the detail modal */
.btn-view {
  background:     none;
  border:         2px solid var(--colour-navy);
  color:          var(--colour-navy);
  border-radius:  var(--radius);
  padding:        5px 14px;
  font-family:    var(--font-primary);
  font-size:      0.75rem;
  font-weight:    700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor:         pointer;
  transition:     all 0.2s;
}

.btn-view:hover {
  background: var(--colour-navy);
  color:      var(--colour-white);
}

/* Empty state message when no submissions exist */
.empty-state {
  text-align: center;
  padding:    60px 20px;
}

.empty-state p {
  font-size: 1rem;
  color:     var(--colour-text-muted);
}


/* ============================================================
   SECTION 24 — ADMIN: DETAIL MODAL
   Full-screen overlay with a scrollable modal panel.
   Shows the complete data for a single submission.
   Press Escape or click the overlay to close.
   ============================================================ */

/* Semi-transparent overlay */
.modal-overlay {
  display:         none;
  position:        fixed;
  inset:           0;
  background:      rgba(14, 34, 68, 0.55);
  z-index:         999;
  align-items:     center;
  justify-content: center;
  padding:         20px;
}

/* Active state — show the overlay (toggled by JS) */
.modal-overlay.open {
  display: flex;
}

/* The modal panel itself */
.modal {
  background:    var(--colour-white);
  border-radius: var(--radius-lg);
  max-width:     900px;
  width:         100%;
  max-height:    90vh;
  overflow-y:    auto;
  box-shadow:    0 24px 80px rgba(0, 0, 0, 0.35);
}

/* Sticky modal header bar */
.modal-header {
  position:        sticky;
  top:             0;
  background:      var(--colour-navy);
  color:           var(--colour-white);
  padding:         20px 28px;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  border-radius:   var(--radius-lg) var(--radius-lg) 0 0;
  border-bottom:   2px solid var(--colour-teal);
}

.modal-header h2 {
  font-family: var(--font-primary);
  font-size:   1.1rem;
  font-weight: 700;
  color:       var(--colour-white);
  letter-spacing: 0.03em;
}

/* Close (✕) button in the modal header */
.modal-close {
  background:  none;
  border:      none;
  color:       rgba(255, 255, 255, 0.7);
  font-size:   1.4rem;
  cursor:      pointer;
  padding:     4px 8px;
  line-height: 1;
  transition:  color 0.2s;
}

.modal-close:hover {
  color: var(--colour-white);
}

/* Modal content area */
.modal-body {
  padding: 28px;
}

/* Meta information row (email, ID, date) */
.modal-meta {
  display:       flex;
  gap:           24px;
  margin-bottom: 24px;
  flex-wrap:     wrap;
}

.modal-meta span {
  font-family: var(--font-secondary);
  font-size:   0.88rem;
  color:       var(--colour-text-muted);
}

.modal-meta strong {
  color:       var(--colour-text);
  font-weight: 600;
}

/* Individual crematorium detail block */
.crem-detail {
  border:        1px solid var(--colour-off-white);
  border-radius: var(--radius);
  margin-bottom: 20px;
  overflow:      hidden;
}

/* Dark header within each crematorium detail block */
.crem-detail-head {
  background:     var(--colour-navy);
  color:          var(--colour-white);
  padding:        12px 18px;
  font-family:    var(--font-primary);
  font-size:      0.85rem;
  font-weight:    700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.crem-detail-body {
  padding: 20px;
}

/* Grid layout for individual data fields */
.detail-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap:                   16px;
  margin-bottom:         16px;
}

/* Single field: label + value pair */
.detail-field .df-label {
  font-family:    var(--font-primary);
  font-size:      0.68rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color:          var(--colour-text-muted);
  margin-bottom:  3px;
}

.detail-field .df-value {
  font-family: var(--font-secondary);
  font-size:   0.92rem;
  color:       var(--colour-text);
  font-weight: 600;
}

/* Greyed-out style when no value was provided */
.detail-field .df-value.empty {
  color:      var(--colour-grey);
  font-style: italic;
  font-weight: 400;
}

/* Sub-section (Standard / Unattended / Reduced) within the detail */
.detail-section {
  margin-top:  18px;
  padding-top: 18px;
  border-top:  1px solid var(--colour-off-white);
}

/* Teal label above each detail sub-section */
.detail-section-title {
  font-family:    var(--font-primary);
  font-size:      0.68rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color:          var(--colour-teal);
  margin-bottom:  14px;
}


/* ============================================================
   SECTION 25 — RESPONSIVE / MEDIA QUERIES
   Adjustments for tablet and mobile screen sizes.
   Two-column grids collapse to single column below 600px.
   Header and dashboard padding reduces on smaller screens.
   ============================================================ */

/* Tablet and below — collapse multi-column grids */
@media (max-width: 768px) {

  .dash-body {
    padding: 16px;
  }

  .dash-header {
    padding: 0 16px;
  }

  .dash-header h1 {
    font-size: 0.85rem;
  }

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

  .modal-body {
    padding: 16px;
  }
}

/* Mobile — single-column layout */
@media (max-width: 600px) {

  .form-row,
  .form-row-3 {
    grid-template-columns: 1fr;
  }

  .crem-body {
    padding: 18px 16px;
  }

  .card-body {
    padding: 18px 16px;
  }

  .site-header h1 {
    font-size: 1.3rem;
  }

  .btn-submit {
    padding: 14px 32px;
    width:   100%;
  }

  .login-box {
    padding: 28px 20px;
  }

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

  .time-wrap {
    flex-wrap: wrap;
  }

  .time-wrap input[type="time"] {
    flex: 1 1 40%;
  }
}


/* ============================================================
   SECTION 26 — CUSTOM TIME PICKER COMPONENT
   Replaces native input[type="time"] with a branded split
   hour/minute input. Supports both typing and clicking the
   up/down arrows.

   Structure per picker:
     .tp-wrap
       .tp-unit  (hours)
         .tp-btn ▲
         .tp-input (HH)
         .tp-btn ▼
       .tp-colon  (:)
       .tp-unit  (minutes)
         .tp-btn ▲
         .tp-input (MM)
         .tp-btn ▼

   Two pickers side by side use .time-range-wrap as the outer
   container, with the "until" separator between them.
   ============================================================ */

/* Outer wrapper for a from–until time range row */
.time-range-wrap {
  display:     flex;
  align-items: center;
  gap:         12px;
  flex-wrap:   wrap;
}

/* Wrapper for a single HH:MM picker */
.tp-wrap {
  display:     inline-flex;
  align-items: center;
  gap:         6px;
}

/* Column containing the up button, input, and down button */
.tp-unit {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             3px;
}

/* The hour or minute number input — matches form input styling */
.tp-input {
  width:         54px;
  text-align:    center;
  padding:       9px 4px;
  border:        2px solid var(--colour-grey);
  border-radius: var(--radius);
  font-family:   var(--font-secondary);
  font-size:     1rem;
  color:         var(--colour-text);
  background:    var(--colour-white);
  outline:       none;
  transition:    border-color 0.2s, box-shadow 0.2s;
  /* Remove browser number spinners — we use our own buttons */
  -moz-appearance: textfield;
}
.tp-input::-webkit-inner-spin-button,
.tp-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
}
.tp-input:focus {
  border-color: var(--colour-teal);
  box-shadow:   0 0 0 3px rgba(66, 158, 166, 0.15);
}

/* Up / Down increment buttons */
.tp-btn {
  width:           54px;
  height:          22px;
  background:      var(--colour-off-white);
  border:          1px solid var(--colour-grey);
  border-radius:   5px;
  color:           var(--colour-navy);
  font-size:       0.6rem;
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: center;
  transition:      background 0.15s, color 0.15s;
  padding:         0;
  line-height:     1;
  user-select:     none;
}
.tp-btn:hover {
  background:   rgba(66, 158, 166, 0.12);
  border-color: var(--colour-teal);
  color:        var(--colour-teal);
}
.tp-btn:active {
  background: var(--colour-teal);
  color:      var(--colour-white);
  border-color: var(--colour-teal);
}

/* Colon separator between hours and minutes */
.tp-colon {
  font-family:    var(--font-primary);
  font-size:      1.4rem;
  font-weight:    700;
  color:          var(--colour-navy);
  line-height:    1;
  padding-bottom: 2px;  /* visually aligns with centre of input */
}

/* Responsive — stack time range pickers vertically on mobile */
@media (max-width: 600px) {
  .time-range-wrap {
    flex-direction: column;
    align-items:    flex-start;
  }
}


/* ============================================================
   SECTION 27 — FORM NOTICE BANNER
   Info strip shown between the site header and the form.
   Uses the brand teal as a left-border accent.
   ============================================================ */

.form-notice {
  max-width:      860px;
  margin:         0 auto;
  padding:        0 20px;
  display:        flex;
  align-items:    center;
  gap:            10px;
  background:     var(--colour-white);
  border-left:    4px solid var(--colour-teal);
  border-radius:  0 var(--radius) var(--radius) 0;
  font-family:    var(--font-secondary);
  font-size:      0.92rem;
  color:          var(--colour-steel);
  padding:        12px 16px 12px 14px;
  margin-top:     24px;
  margin-bottom:  4px;
  box-shadow:     var(--shadow);
}

.form-notice svg {
  flex-shrink:  0;
  color:        var(--colour-teal);
}


/* ============================================================
   SECTION 28 — ADMIN FILTER SECTION
   Date range + search bar shown above the submissions table.
   Stacks vertically on mobile.
   ============================================================ */

.filter-section {
  display:        flex;
  flex-wrap:      wrap;
  gap:            12px;
  align-items:    flex-end;
  margin-bottom:  20px;
}

/* Date range group */
.date-range {
  display:     flex;
  align-items: flex-end;
  gap:         10px;
  flex-wrap:   wrap;
}

.date-field {
  display:        flex;
  flex-direction: column;
  gap:            4px;
}

.date-field label {
  font-family:    var(--font-primary);
  font-size:      0.7rem;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color:          var(--colour-text-muted);
}

.date-field input[type="date"] {
  padding:       9px 12px;
  border:        2px solid var(--colour-grey);
  border-radius: var(--radius);
  font-family:   var(--font-secondary);
  font-size:     0.9rem;
  color:         var(--colour-text);
  background:    var(--colour-white);
  outline:       none;
  cursor:        pointer;
  transition:    border-color 0.2s;
}

.date-field input[type="date"]:focus {
  border-color: var(--colour-teal);
  box-shadow:   0 0 0 3px rgba(66, 158, 166, 0.15);
}

/* Divider between date range and search */
.filter-divider {
  width:      1px;
  height:     38px;
  background: var(--colour-grey);
  align-self: flex-end;
  flex-shrink: 0;
}

/* Search group */
.search-wrap {
  display: flex;
  gap:     10px;
  flex:    1;
  min-width: 220px;
  align-items: flex-end;
}

.search-wrap input[type="text"] {
  flex:          1;
  padding:       10px 14px;
  border:        2px solid var(--colour-grey);
  border-radius: var(--radius);
  font-family:   var(--font-secondary);
  font-size:     0.92rem;
  outline:       none;
  background:    var(--colour-white);
  transition:    border-color 0.2s;
}

.search-wrap input[type="text"]:focus {
  border-color: var(--colour-teal);
  box-shadow:   0 0 0 3px rgba(66, 158, 166, 0.15);
}

/* Filter status bar — shown when a filter is active */
.filter-status {
  display:       none;
  font-family:   var(--font-secondary);
  font-size:     0.85rem;
  color:         var(--colour-steel);
  margin-bottom: 12px;
  padding:       8px 14px;
  background:    rgba(66, 158, 166, 0.08);
  border:        1px solid rgba(66, 158, 166, 0.25);
  border-radius: var(--radius);
}

.filter-status.active {
  display: block;
}

.filter-status strong {
  color:       var(--colour-navy);
  font-weight: 600;
}

@media (max-width: 768px) {
  .filter-section   { flex-direction: column; align-items: stretch; }
  .filter-divider   { display: none; }
  .date-range       { flex-wrap: wrap; }
}


/* ============================================================
   SECTION 27 — PRICE INPUT & DIGIT-ONLY INPUT STYLES

   .price-wrap  — positions the £ symbol inside the input field
   .price-symbol — the £ character rendered as a positioned label
   .digit-input  — used on Branch Number and Cost Centre to signal
                   numeric-only entry (no extra visual change needed
                   beyond the maxlength constraint enforced by JS)
   ============================================================ */

/* Wrapper that positions the £ prefix inside the input */
.price-wrap {
  position: relative;
  display:  block;
}

/* The £ symbol — absolutely positioned over the left of the input */
.price-symbol {
  position:       absolute;
  left:           13px;
  top:            50%;
  transform:      translateY(-50%);
  font-family:    var(--font-secondary);
  font-size:      0.95rem;
  color:          var(--colour-text-muted);
  pointer-events: none;   /* clicks pass through to the input */
  user-select:    none;
  line-height:    1;
}

/* Push input text right to make room for the £ symbol */
.price-wrap input {
  padding-left: 28px;
}