/* ========== Design Tokens ========== */
:root {
  --primary-dark: #2c3e50;
  --accent-gold: #c5a059;
  --accent-gold-dark: #a68545;
  --bg-light: #fcfcfc;
  --bg-white: #ffffff;
  --text-main: #333333;
  --text-muted: #666666;
  --border-color: #e0e0e0;
  --shadow-subtle: 0 4px 12px rgba(0, 0, 0, 0.05);
  --shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.1);
  --radius: 6px;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif: 'Playfair Display', Georgia, serif;
}

/* ========== Base & Reset ========== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-sans);
  background-color: var(--bg-light);
  color: var(--text-main);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* ========== Header & Navigation ========== */
header {
  background-color: var(--bg-white);
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.5rem;
  max-width: 1500px;
  margin: 0 auto;
}

.logo img {
  height: 60px;
  max-width: 100%;
  transition: opacity 0.3s ease;
}

.logo img:hover {
  opacity: 0.8;
}

/* Hamburger menu toggle */
.menu-toggle {
  display: none;
}

.hamburger {
  display: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--primary-dark);
  padding: 0.5rem;
  user-select: none;
}

/* Nav links */
.nav-tabs {
  display: flex;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-tab a {
  text-decoration: none;
  color: var(--primary-dark);
  font-weight: 500;
  font-size: 0.95rem;
  padding: 0.5rem 0;
  position: relative;
  transition: color 0.3s ease;
}

.nav-tab a:hover {
  color: var(--accent-gold);
}

.nav-tab.active a {
  color: var(--accent-gold);
}

.nav-tab.active a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--accent-gold);
}

/* ========== Main Content ========== */
main {
  padding: 3rem 1.5rem;
  max-width: 1500px;
  margin: auto;
  min-height: 70vh;
}

h1, h2, h3 {
  font-family: var(--font-serif);
  color: var(--primary-dark);
  margin-bottom: 1rem;
}

h1 { font-size: 2.5rem; line-height: 1.2; }
h2 { font-size: 1.8rem; border-left: 4px solid var(--accent-gold); padding-left: 1rem; margin-top: 2rem; }
h3 { font-size: 1.3rem; margin-top: 2rem; color: var(--text-main); }

p {
  margin-bottom: 1.25rem;
  color: var(--text-main);
}

/* ========== Tab Content Styling ========== */
.tab-content {
  display: none;
  animation: fadeIn 0.4s ease-out;
}

.tab-content.active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Wrap content in cards for focus */
#content > div {
  background: var(--bg-white);
  padding: 2.5rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow-subtle);
  border: 1px solid var(--border-color);
}

/* ========== Tables ========== */
.subscriptions-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 2rem 0;
  background-color: var(--bg-white);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border-color);
}

.subscriptions-table th,
.subscriptions-table td {
  padding: 1rem;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}

.subscriptions-table th {
  background-color: #fafafa;
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.subscriptions-table tr:last-child td {
  border-bottom: none;
}

.subscriptions-table tr:hover td {
  background-color: #fcfcfc;
}

/* ========== Forms ========== */
label {
  display: block;
  margin-bottom: 0.4rem;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--primary-dark);
}

input[type="text"],
input[type="email"],
input[type="number"],
input[type="url"],
select,
textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 1rem;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  margin-bottom: 1.5rem;
  background-color: var(--bg-white);
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent-gold);
  box-shadow: 0 0 0 3px rgba(197, 160, 89, 0.15);
}

/* A GIS search point: an optional Eircode with a "Look up" button on the first row, then the
   latitude/longitude coordinates (filled either by hand or from the geocoded Eircode). */
.polygon-point {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem 0.75rem;
  align-items: center;
  margin-bottom: 1.5rem;
  padding: 1rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background-color: var(--bg-white);
}
.polygon-point input {
  margin-bottom: 0;
}
.polygon-point .polygon-latitude,
.polygon-point .polygon-longitude {
  grid-column: 1 / -1;
}
.polygon-point .polygon-geocode {
  white-space: nowrap;
}
.polygon-point > button:last-child {
  justify-self: start;
}

button {
  padding: 0.75rem 1.5rem;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--primary-dark);
  color: white;
}

button:hover {
  background-color: #1a252f;
  transform: translateY(-1px);
}

button.primary {
  background-color: var(--accent-gold);
  color: white;
}

button.primary:hover {
  background-color: var(--accent-gold-dark);
}

button.disabled {
  background-color: #ccc;
  cursor: not-allowed;
  transform: none;
}

textarea {
  resize: vertical;
  min-height: 100px;
}

/* ========== Hero Section (About Page) ========== */
#about-section {
  text-align: left;
}

.hero {
  margin-bottom: 3rem;
  overflow: hidden;
  border-radius: var(--radius);
  position: relative;
}

.hero img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.5s ease;
}

.about-content {
  max-width: 800px;
}

.about-content h2 {
  font-size: 3rem;
  border: none;
  padding-left: 0;
  margin-bottom: 1.5rem;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* The greeting ends in the user's display name, which falls back to their email address. That is a
   single unbreakable word, and on a phone it is wider than the content column, so it must be allowed
   to break mid-word rather than run off the right of the screen. */
#welcome {
  overflow-wrap: break-word;
}

.about-content p {
  font-size: 1.2rem;
  color: var(--text-muted);
}

/* ========== Contact Section ========== */
.contact-section {
  margin-top: 5rem;
  padding-top: 3rem;
  border-top: 1px solid var(--border-color);
  max-width: 800px;
}

.contact-section h2 {
  font-size: 2.5rem;
  border: none;
  padding-left: 0;
  margin-bottom: 1rem;
}

.contact-section > p {
  font-size: 1.1rem;
  color: var(--text-muted);
  margin-bottom: 2.5rem;
}

.form-row {
  display: flex;
  gap: 1.5rem;
}

.form-group {
  flex: 1;
  margin-bottom: 1rem;
}

#contact-form textarea {
  min-height: 150px;
}

@media (max-width: 600px) {
  .form-row {
    flex-direction: column;
    gap: 0;
  }
}

/* ========== Footer ========== */
footer {
  background-color: var(--bg-white);
  padding: 3rem 1.5rem;
  border-top: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: 0.9rem;
}

footer a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.3s ease;
}

footer a:hover {
  color: var(--accent-gold);
}

/* ========== Utility & States ========== */
.hidden { display: none !important; }

.de-emphasised {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.code-string {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  background-color: #f1f1f1;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  font-size: 0.9em;
}

.warning {
  color: #856404;
  background-color: #fff3cd;
  border: 1px solid #ffeeba;
  padding: 1rem;
  border-radius: var(--radius);
  margin: 1rem 0;
}

.error {
  color: #721c24;
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
  padding: 1rem;
  border-radius: var(--radius);
}

/* ========== Billing ========== */
#estimated-bill {
  padding: 2rem;
  background-color: #f8f9fa;
  border: 1px dashed var(--accent-gold);
  border-radius: var(--radius);
  margin: 2rem 0;
}

.bill-amount {
  font-family: var(--font-serif);
  font-size: 2.5rem;
  color: var(--accent-gold);
}

/* ========== Loading Spinner ========== */
.loading-spinner::after {
  content: "";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin-left: 0.5rem;
  border: 2px solid rgba(255,255,255,.3);
  border-radius: 50%;
  border-top-color: #fff;
  animation: spin 0.6s linear infinite;
}

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

/* ========== Responsive ========== */
@media (max-width: 768px) {
  h1 { font-size: 2rem; }
  
  .nav-container { padding: 1rem; }
  
  .hamburger {
    display: block;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  }

  .menu-toggle:checked + .hamburger {
    transform: rotate(90deg);
    color: var(--accent-gold);
  }
  
  .nav-tabs {
    display: flex; /* Changed from none to flex to support transitions */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    flex-direction: column;
    background: var(--bg-white);
    padding: 1rem 0;
    box-shadow: var(--shadow-hover);
    gap: 0;
    z-index: 99;
  }
  
  .menu-toggle:checked ~ nav .nav-tabs {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  
  .nav-tab {
    padding: 0.75rem 1.5rem;
  }
  
  .nav-tab a::after { display: none; }
  
  .about-content h2 { font-size: 2rem; }
  
  #content > div { padding: 1.5rem; }
}

/* ========== Dialogs ========== */
.error-dialog {
  border: none;
  border-radius: 12px;
  padding: 2rem;
  max-width: 550px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.error-dialog h3 {
  font-family: var(--font-serif);
  margin-top: 0;
}

.error-dialog-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 1.5rem;
  background: none;
  color: var(--text-muted);
}

/* On mobile a content-sized dialog can be uncomfortably narrow; make dialogs occupy nearly
   the full screen width, leaving just a small margin so they still read as dialogs. */
@media (max-width: 600px) {
  .error-dialog {
    width: 92vw;
    padding: 1.5rem;
  }
}

/* ========== Toast Notifications ========== */
.toast-container {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  z-index: 9999;
  pointer-events: none;
}

.toast {
  min-width: 300px;
  max-width: 450px;
  padding: 1.25rem 1.5rem;
  border-radius: 12px;
  background: white;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  color: var(--text-main);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 1rem;
  pointer-events: auto;
  animation: toast-in 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  transition: all 0.3s ease;
}

.toast.removing {
  animation: toast-out 0.3s ease forwards;
}

.toast.success {
  border-left: 5px solid #28a745;
}

.toast.error {
  border-left: 5px solid #dc3545;
}

@keyframes toast-in {
  from {
    transform: translateX(100%) opacity(0);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes toast-out {
  to {
    transform: translateY(20px);
    opacity: 0;
  }
}

@media (max-width: 600px) {
  .toast-container {
    bottom: 1rem;
    right: 1rem;
    left: 1rem;
  }
  .toast {
    min-width: 0;
  }
}

/* ========== Tracking Tab Alignment Overrides (PA-1) ========== */
.subscriptions-table td {
  vertical-align: bottom;
}

.subscriptions-table input,
.subscriptions-table select,
.subscriptions-table button {
  margin-bottom: 0;
}

/* Was an inline style on the element. It lives here so that the narrow-screen rules below can
   widen it; an inline style would beat them. */
#add-subscription-planning-application-council {
  width: 19ch;
  font-size: 80%;
}

/* ========== Responsive Tables ==========
   Tables are fine on a laptop, but no phone can show six or seven columns. Scrolling a table
   sideways is worse than useless, because the columns off the right of the screen give the reader
   no hint that they are there at all. So below this width each row becomes a card, and each cell
   becomes one line of that card, headed by its column name. The cells carry that name in a
   data-label attribute: the static tables set it in index.html, and the rows built at run time set
   it through createCell() in app.js.

   This section is last in the file so that its rules win the ties against the desktop rules above. */
@media (max-width: 768px) {
  .subscriptions-table {
    border: none;
    border-radius: 0;
    background: none;
    overflow: visible;
    margin: 1.5rem 0;
  }

  /* The column names are repeated inside every card, so the header row has nothing left to say. */
  .subscriptions-table thead {
    display: none;
  }

  .subscriptions-table,
  .subscriptions-table tbody,
  .subscriptions-table tr,
  .subscriptions-table td {
    display: block;
    width: 100%;
  }

  .subscriptions-table tr {
    margin-bottom: 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background-color: var(--bg-white);
    overflow: hidden;
  }

  .subscriptions-table td {
    display: flex;
    /* With the label pushed left by its auto margin below, this keeps the value against the right
       edge whether it fits beside the label or wraps onto a line of its own. */
    justify-content: flex-end;
    align-items: baseline;
    /* A cell holding several elements makes each one a flex item, and a row of them can be wider
       than the card. Wrapping keeps the surplus visible instead of clipping it away. */
    flex-wrap: wrap;
    gap: 1rem;
    padding: 0.6rem 1rem;
    text-align: right;
    /* A long file number or applicant name breaks rather than pushing the card wider. Deliberately
       not "anywhere", which would also let the value shrink to a single character per line and so
       hand all the width to the label beside it. */
    overflow-wrap: break-word;
  }

  .subscriptions-table td::before {
    content: attr(data-label);
    /* Wide enough for the column name and no wider, but shrinkable, so that a long one such as
       "Reference / File Number" wraps rather than squeezing the value beside it. */
    flex: 0 1 auto;
    margin-right: auto;
    text-align: left;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
  }

  /* Restore the separators between the lines of the last card, then drop the one that would
     otherwise sit above the bottom edge of every card. */
  .subscriptions-table tr:last-child td {
    border-bottom: 1px solid var(--border-color);
  }

  .subscriptions-table tr td:last-child {
    border-bottom: none;
  }

  /* An unnamed column — the delete button — has nothing to label, so its cell holds only the
     button, which the rules above put against the right edge. */
  .subscriptions-table td:not([data-label])::before {
    content: none;
  }

  /* Content too long to sit beside its label: it gets the full width of the card, under the label. */
  .subscriptions-table td.stacked-cell {
    display: block;
    text-align: left;
  }

  .subscriptions-table td.stacked-cell::before {
    display: block;
    margin-bottom: 0.25rem;
  }

  .subscriptions-table td.stacked-cell ul {
    padding-left: 1.25rem;
  }

  /* The first column of the billing tables names the row rather than holding a value, so it
     heads the card instead of becoming a line of it. */
  .subscriptions-table td.row-heading {
    display: block;
    text-align: left;
    font-weight: 600;
    background-color: #fafafa;
  }

  .subscriptions-table td.row-heading::before {
    content: none;
  }

  /* The rows that add a new subscription are a form, not data, so they get no labels and no card
     styling; their controls simply stack. */
  .subscriptions-table tr.add-row {
    border: none;
    background: none;
    margin-bottom: 0;
  }

  .subscriptions-table tr.add-row td {
    display: block;
    padding: 0 0 1rem 0;
    text-align: left;
    border-bottom: none;
  }

  .subscriptions-table tr.add-row td::before {
    content: none;
  }

  .subscriptions-table tr.add-row button {
    width: 100%;
  }

  /* Matched on its id to beat the fixed width the desktop rules give it. */
  #add-subscription-planning-application-council {
    width: 100%;
    font-size: 1rem;
  }
}