/* Looking After Pooch — style.css (Nicer UI + footer + print-safe flyer)
   Safe: does not remove/rename any IDs/classes your JS relies on.
*/

:root{
  --bg:#fbf6ee;
  --panel:#fff;
  --ink:#0f172a;
  --muted:#475569;
  --line:#eadfce;
  --brand:#1f5f46;
  --brand2:#127858;
  --soft:#e6efe9;
  --shadow:0 10px 30px rgba(15,23,42,.08);
  --radius:18px;

  /* form helpers */
  --field:#ffffff;
  --fieldLine: rgba(234,223,206,.95);
  --focus: rgba(31,95,70,.45);
  --focusRing: rgba(31,95,70,.14);

  /* section accents */
  --accent-record: rgba(31,95,70,.16);
  --accent-micro:  rgba(45,125,210,.16);
  --accent-pet:    rgba(170,90,210,.16);
  --accent-print:  rgba(245,165,36,.20);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:var(--ink);
  background: linear-gradient(#fff, var(--bg));
}

/* Typography */
h1,h2,h3{ letter-spacing:-.02em; }
.hint,.muted,.status,.small,.sub,.statusline{ color:var(--muted); }
.hint,.muted{ margin:0 0 14px; }
.status,.small,.statusline{ margin:10px 0 0; }

/* Layout sections */
.hero{
  padding:42px 18px 22px;
  border-bottom:1px solid var(--line);
}
.hero-inner{ max-width:980px; margin:0 auto; }
h1{ font-size: clamp(34px, 4vw, 56px); margin:0 0 6px; }
.tagline{ font-size:18px; margin:0 0 8px; color:var(--ink); }
.sub{ margin:0; }
.hero-buttons{ display:flex; gap:12px; flex-wrap:wrap; margin-top:18px; }

.section{
  padding:28px 18px;
  border-bottom:1px solid var(--line);
}
.section > *{ max-width:1040px; margin-left:auto; margin-right:auto; }
.section h2{
  font-size: clamp(26px, 3vw, 40px);
  margin:0 0 6px;
}

/* Buttons (site-wide) */
.btn, button.btn, .pill, button, input[type="button"], input[type="submit"]{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:11px 18px;
  border-radius:999px;
  border:1px solid var(--line);
  background: var(--panel);
  color:var(--ink);
  text-decoration:none;
  font-weight:900;
  cursor:pointer;
  user-select:none;
}
.btn:hover, .pill:hover, button:hover{ filter:brightness(.985); }
.btn:active, .pill:active, button:active{ transform: translateY(1px); }
.btn.primary, .btn-primary, .pill.primary{
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  color:#fff;
  border-color:transparent;
  box-shadow: 0 10px 22px rgba(31,95,70,.18);
}
.btn.soft{ background: rgba(255,255,255,.86); }
.btn.disabled, .btn[aria-disabled="true"]{ opacity:.55; cursor:not-allowed; pointer-events:none; }

/* Cards */
.card, .planner-card, .selected, details.panel, details, .panel, .box{
  background: rgba(255,255,255,.86);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card{ overflow:hidden; }
.card-hd{
  padding:14px 16px;
  border-bottom:1px solid rgba(234,223,206,.75);
  font-weight:950;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.card-bd{ padding:14px 16px 16px; }

/* Ensure planner area sits above any Leaflet panes */
#planner-section, #stay-section, #siteFooter{
  position: relative;
  z-index: 5;
}
/* Map stays below */
#communityMap, .leaflet-container{
  position: relative;
  z-index: 1;
}

/* Forms */
label{ display:block; font-weight:950; margin: 14px 0 6px; line-height:1.2; }
input, select, textarea{
  width:100%;
  max-width:100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--fieldLine);
  background: var(--field);
  color: var(--ink);
  font-size:16px;
  line-height:1.25;
  box-shadow: 0 1px 0 rgba(15,23,42,.03);
}
textarea{ min-height: 110px; resize: vertical; }
input[type="search"], select{ border-radius: 999px; }
input:focus, select:focus, textarea:focus{
  outline:none;
  border-color: var(--focus);
  box-shadow: 0 0 0 4px var(--focusRing);
}

/* Rows used by planner */
.row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.row > *{ flex: 0 0 auto; }
.row .grow{ flex:1 1 240px; }

/* Table wrapper */
.table-wrap{
  margin-top:14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow:auto;
  background:#fff;
  box-shadow: var(--shadow);
}
table{ width:100%; border-collapse:collapse; font-size:14px; }
th{
  text-align:left;
  padding: 12px 10px;
  color: var(--muted);
  font-weight:950;
  background: rgba(251,246,238,.75);
  border-bottom: 1px solid var(--line);
  white-space:nowrap;
}
td{
  padding: 12px 10px;
  border-bottom: 1px solid rgba(234,223,206,.65);
  vertical-align:top;
}
tbody tr:hover td{ background: rgba(31,95,70,.05); }

/* Selected row highlight */
tr.is-selected td{
  background: rgba(31,95,70,.07);
}
tr.is-selected td:first-child{
  box-shadow: inset 3px 0 0 rgba(31,95,70,.55);
}

/* Make the "View" buttons read as primary action in the table */
table .btn, table button{ padding: 9px 14px; }
tbody tr td:last-child button,
tbody tr td:last-child .btn{
  background: rgba(31,95,70,.10);
  border-color: rgba(31,95,70,.25);
}

/* Details panels (accordion) */
details.panel{
  margin-top: 12px;
  padding: 8px 10px;
  overflow: hidden;
  position: relative;
}
details.panel > summary{
  list-style:none;
  cursor:pointer;
  font-weight:950;
  padding: 10px 8px;
}
details.panel > summary::-webkit-details-marker{ display:none; }
details.panel > summary::after{ content:"▾"; float:right; opacity:.6; }
details.panel[open] > summary::after{ content:"▴"; }
details.panel .inner{ padding: 12px 8px 10px; }

/* Make sure buttons are always clickable even under theme quirks */
details, details *{ pointer-events:auto !important; }

/* Footer (centred, nicer) */
.site-footer{
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(251,246,238,.78), rgba(255,255,255,.95));
  margin-top: 28px;
  padding: 30px 18px;
  text-align: center;
}
.site-footer .footer-inner{
  max-width: 980px;
  margin: 0 auto;
}
.site-footer .footer-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px 14px;
  margin-bottom: 10px;
}
.site-footer .footer-links a{
  color: var(--brand);
  text-decoration:none;
  font-weight:900;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(234,223,206,.9);
  background: rgba(255,255,255,.75);
}
.site-footer .footer-links a:hover{ filter:brightness(.98); text-decoration:underline; }
.site-footer .footer-note{
  margin: 8px 0 0;
  color: var(--muted);
  font-weight: 750;
  font-size: 14px;
}

/* Mobile tweaks */
@media (max-width: 560px){
  th, td{ padding: 10px 8px; }
  input[type="search"], select{ width: 100%; }
  .site-footer .footer-links a{ padding: 7px 10px; font-size: 13px; }
}

/* =========================================================
   MISSING FLYER — STRICT ONE-PAGE A4 PRINT (keeps colours)
   Targets: <body class="flyer-page"> ... <div class="paper">
   ========================================================= */
@page{ size: A4; margin: 0; }

@media print{
  *{
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  html, body{
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    overflow: hidden !important;
  }
  body *{ visibility: hidden !important; }

  body.flyer-page .paper,
  body.flyer-page .paper *{
    visibility: visible !important;
  }
  body.flyer-page .paper{
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    width: 210mm !important;
    height: 297mm !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    transform: scale(0.90) !important;
    transform-origin: top left !important;
    border: none !important;
  }
  body.flyer-page .topbar,
  body.flyer-page .actions,
  body.flyer-page .tool-wrap > div:not(.stage){
    display: none !important;
  }
}


/* =========================================================
   Pastel "Flyer" look for the planner panels (no HTML changes)
   Targets only the Pet care planner section.
   ========================================================= */

:root{
  /* Pastel accents inspired by your Missing Animal flyer */
  --pastel-pink:  rgba(255, 122, 173, .16);
  --pastel-lilac: rgba(142, 124, 255, .16);
  --pastel-blue:  rgba( 83, 168, 255, .16);
  --pastel-mint:  rgba( 64, 197, 164, .16);
  --pastel-amber: rgba(245, 165,  36, .18);
}

/* Make planner cards feel less "plain white" */
#planner-section .card{
  background:
    radial-gradient(900px 260px at 12% -10%, rgba(83,168,255,.10), transparent 55%),
    radial-gradient(800px 260px at 92% 0%, rgba(255,122,173,.10), transparent 55%),
    rgba(255,255,255,.88);
}

/* Give the Selected record panel the soft blue glow like the flyer */
#planner-section details.panel[open]:first-of-type,
#planner-section details.panel:first-of-type{
  border-color: rgba(83,168,255,.28);
  background:
    radial-gradient(900px 240px at 0% 0%, rgba(83,168,255,.14), transparent 55%),
    radial-gradient(700px 240px at 100% 0%, rgba(255,122,173,.10), transparent 60%),
    rgba(255,255,255,.88);
}

/* Microchip = lilac */
#planner-section details.panel:nth-of-type(2){
  border-color: rgba(142,124,255,.26);
  background:
    radial-gradient(900px 240px at 0% 0%, rgba(142,124,255,.14), transparent 55%),
    radial-gradient(700px 220px at 100% 10%, rgba(83,168,255,.08), transparent 60%),
    rgba(255,255,255,.88);
}

/* Pet details = warm amber */
#planner-section details.panel:nth-of-type(3){
  border-color: rgba(245,165,36,.26);
  background:
    radial-gradient(900px 240px at 0% 0%, rgba(245,165,36,.16), transparent 55%),
    radial-gradient(700px 220px at 100% 0%, rgba(255,122,173,.08), transparent 60%),
    rgba(255,255,255,.88);
}

/* Printable profile = mint */
#planner-section details.panel:nth-of-type(4){
  border-color: rgba(64,197,164,.26);
  background:
    radial-gradient(900px 240px at 0% 0%, rgba(64,197,164,.14), transparent 55%),
    radial-gradient(700px 220px at 100% 0%, rgba(83,168,255,.08), transparent 60%),
    rgba(255,255,255,.88);
}

/* Make the <summary> line look like a tidy header */
#planner-section details.panel > summary{
  font-weight: 950;
  padding: 12px 12px;
  border-radius: 14px;
}
#planner-section details.panel > summary:hover{
  filter: brightness(.99);
}

/* Softer inside padding + slightly nicer inner background */
#planner-section details.panel .inner{
  padding: 12px 12px 14px;
}
#planner-section details.panel .inner{
  background: rgba(255,255,255,.55);
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.06);
}

/* Buttons in the Selected record area: match flyer softness */
#planner-section #printLastBtn{
  background: rgba(64,197,164,.14);
  border-color: rgba(64,197,164,.25);
}
#planner-section #recordDeleteBtn{
  background: rgba(255,122,173,.14);
  border-color: rgba(255,122,173,.25);
}

/* Highlight selected row in the table (planner.js adds .is-selected) */
#planner-section tbody tr.is-selected{
  background: rgba(83,168,255,.10);
}
#planner-section tbody tr.is-selected td{
  border-bottom-color: rgba(83,168,255,.22);
}

/* Printable profile action row (injected by planner.js) */
#planner-section .pp-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

/* Print: keep it clean */
@media print{
  #planner-section details.panel{
    box-shadow:none !important;
  }
}

/* Existing seam hint */
.leaflet-tile {
  outline: 1px solid transparent;
}


/* =========================================================
   COMMUNITY MAP — BIGGER EMBED + LESS SCROLL (SAFE)
   ========================================================= */

/* Make the embedded homepage map much taller and responsive */
#communityMap{
  height: clamp(620px, 82vh, 980px);
}

/* Reduce excess spacing around the map section */
#map-section.section{
  padding-top: 14px;
  padding-bottom: 14px;
}

/* Remove faint tile seam "grid lines" (browser subpixel gaps) */
.leaflet-container{
  background:#fff; /* prevent background peeking through */
}
.leaflet-container .leaflet-tile{
  outline: none !important;
  border: none !important;
  image-rendering: auto;
  transform: translateZ(0); /* helps some browsers */
}
.leaflet-container .leaflet-tile-container{
  transform: translateZ(0);
}