/* =============================
   Net Zero Scout CSS Theme
   ============================= */

/* Tokens */
:root{
    --nz-primary: #699293;          /* brand teal-grey */
    --nz-contrast: #BCAD19;         /* mustard accent */
    --nz-accent-1: #455B7A;         /* slate */
    --nz-accent-2: #8AA919;         /* green */
    --nz-accent-3: #E17588;         /* coral */
    --nz-accent-4: #8FB3E3;         /* light blue */
    --nz-neutral-700: #73726E;      /* neutral gray */

    --nz-surface: #FFFFFF;          /* card bg */
    --nz-surface-tint: #F6F8F8;     /* subtle tint for link tiles */
    --nz-bg: #F2F4F5;               /* page + header bg */
    --nz-text: #334155;             /* neutral text */
    --nz-muted: #55636E;            /* muted text */
    --nz-border: 1px solid rgba(115,114,110,.18);
    --nz-shadow: 0 2px 8px rgba(16, 24, 40, 0.06);
    --nz-radius: 8px;

    --font-heading: "Aptos Display", "Aptos", "Inter", "Segoe UI", Roboto, Arial, sans-serif;
    --font-body: "Aptos", "Inter", "Segoe UI", Roboto, Arial, sans-serif;
}

/* Global */
html, body {
    background: var(--nz-bg) !important;
    color: var(--nz-text);
    font-family: var(--font-body);
}

/* Headers + containers use same bg */
.header,
.topbar,
.navbar,
.site-header,
.page-shell,
.main-wrapper,
.content-wrapper {
    background: var(--nz-bg) !important;
}

/* Typography */
h1,h2,h3,h4,h5,h6,.header1 {
    font-family: var(--font-heading);
    color: var(--nz-primary);
}

/* Links */
a { color: var(--nz-primary); text-decoration: none; }
a:hover { color: #567C7C; text-decoration: underline; }

/* Containers */
.container, main.container { max-width: 1200px; margin: 0 auto; }
.card {
    border-radius: var(--nz-radius);
    background: var(--nz-surface);
    box-shadow: var(--nz-shadow);
}
.card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); }

/* Cards / panels */
.card,
.panel,
.tile,
.card-section-box,
.card-section-box-reduced,
.dashboard-card,
.stat-card,
.chart-card {
  background: var(--nz-surface);
  color: var(--nz-text);
  border: var(--nz-border);
  box-shadow: var(--nz-shadow);
  border-radius: 10px;
}
.card-section-box {
  padding: 20px;
  min-height: 220px;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.card-section-box-reduced {
  padding: 8px 10px !important;
  min-height: unset !important;
  display: flex; flex-direction: column; justify-content: center;
}
.card-section-box:hover,
.card-section-box-reduced:hover {
  border-color: color-mix(in srgb, var(--nz-primary) 35%, rgba(115,114,110,.18));
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

/* Homepage link tiles */
.home-tiles .card,
.home-link-card,
.quick-link-card {
  background: var(--nz-surface-tint);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.home-tiles .card:hover,
.home-link-card:hover,
.quick-link-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
  border: 1px solid var(--nz-contrast);
  color: var(--nz-contrast);
}

/* Buttons */
.btn, .button { border-radius: var(--nz-radius); }
.btn-primary, .button {
  background: var(--nz-primary);
  border-color: var(--nz-primary);
  color: #fff;
}
.btn-primary:hover, .button:hover {
  background: #567C7C;
  border-color: #567C7C;
}
.btn-outline-secondary {
  border: 2px solid var(--nz-primary);
  color: var(--nz-primary);
  font-weight: 600;
}
.btn-outline-secondary:hover {
  background: var(--nz-primary);
  color: #fff;
}

/* Destructive / Danger button */
.btn-danger {
  background: #C94C4C;   /* warm muted red */
  border: none;
  color: #fff;
  font-weight: 600;
  border-radius: var(--nz-radius);
  transition: all 0.2s ease-in-out;
}

.btn-danger:hover {
  background: #A63C3C;   /* darker on hover */
}

.btn-danger:active {
  background: #8A2E2E;
  transform: translateY(1px);
}

.btn-danger:disabled {
  background: #E0A8A8;
  cursor: not-allowed;
}

/* Contrast (mustard) button */
.btn-contrast {
  background: var(--nz-contrast, #BCAD19);
  border-color: var(--nz-contrast, #BCAD19);
  color: #fff;
  font-weight: 600;
  border-radius: var(--nz-radius);
  transition: all 0.2s ease-in-out;
}
.btn-contrast:hover {
  background: #8D8213; /* darker mustard */
  border-color: #8D8213;
  color: #fff;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  transform: translateY(-1px);
}



/* Ensure link buttons behave like real buttons */
a.btn {
  text-decoration: none;      /* remove underline */
}

a.btn:hover {
  text-decoration: none;      /* keep underline off */
  filter: brightness(0.9);    /* optional: same darkening as hover */
}

/* Footer */
footer {
  width: 100%;
  text-align: center;
  background-color: #fff;
  color: #666;
  padding: 10px 0;
  position: relative;
}
.page-footer { width: 100%; position: relative; bottom: 0; }
main.container { min-height: 70vh; }

/* Energy Table */
table, .table {
  background: var(--nz-surface);
  border: var(--nz-border);
}
.energy-table input[type="number"] {
  text-align: right;
  padding: 2px 4px;
  font-size: 0.875rem;
  width: 100%;
  min-width: 80px;
  color: var(--nz-text);
  background: var(--nz-surface);
  border: 1px solid rgba(115,114,110,.3);
  border-radius: 4px;
}
.energy-table input[type="number"]:focus {
  outline: none;
  border-color: var(--nz-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--nz-primary) 25%, transparent);
}
.energy-table th {
  font-weight: 600;
  background: color-mix(in srgb, var(--nz-primary) 10%, #ffffff);
  border-bottom: 1px solid rgba(115,114,110,.25);
}
.energy-table td,
.energy-table th { padding: 4px !important; vertical-align: middle; color: var(--nz-text); }
.energy-table .sticky-col {
  position: sticky;
  left: 0;
  background: var(--nz-surface);
  z-index: 1;
  box-shadow: 2px 0 0 rgba(115,114,110,.15);
}

/* Hover box */
.hover-lift { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.hover-lift:hover { transform: translateY(-5px); box-shadow: 0 12px 24px rgba(0,0,0,0.15); }

/* City cards */
.city-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; padding: 8px; }
.city-card {
  padding: 18px 14px;
  border-radius: 12px;
  border: 1px solid #ddd;
  background-color: var(--nz-surface);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.city-card:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); }

/* Sidebar */
.sidebar-sticky {
  position: sticky; top: 20px;
  height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 10px;
  border-radius: 12px;
  background: var(--nz-surface);
  border: 1px solid #ddd;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* Modern card style */
.modern-card {
  border-radius: 12px;
  border: 1px solid #ddd;
  background: var(--nz-surface);
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.modern-card .card-title { font-size: 18px; font-weight: 600; color: var(--nz-primary); margin-bottom: 8px; }
.modern-card .card-subtitle { font-size: 13px; color: #666; margin-bottom: 12px; }
.modern-card .card-body { font-size: 14px; }

/* Budget slider */
.budget-slider { width: 100%; }
.budget-value { font-weight: 600; color: var(--nz-primary); }

/* Muted text */
.text-muted, .muted, .subtle { color: var(--nz-muted); }

/* Badges */
.badge-contrast{ background: var(--nz-contrast); color: #10140A; }
.badge-brand{ background: var(--nz-primary); color: #ffffff; }

/* ==== Toolbox-Karten: konsistenter Hover, egal ob <div> oder <a> ==== */

/* Basis: macht <a class="card card-toolbox ...> vollflächig klickbar */
a.card.card-toolbox {
    display: block;
    text-decoration: none;
    color: inherit;
  }

  /* Gemeinsame Defaults + sanfte Animation */
  .card.card-toolbox {
    border: var(--nz-border);
    background: var(--nz-surface); /* oder var(--nz-surface-tint) falls gewünscht */
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, color .18s ease;
    will-change: transform, box-shadow;
  }

  /* Hover/Fokus — greift für:
     - <div class="card card-toolbox ...">
     - <a class="card card-toolbox ...">
     - <a><div class="card card-toolbox ..."></div></a> (Link um die Karte herum) */
  .card.card-toolbox:hover,
  .card.card-toolbox:focus-within,
  a.card.card-toolbox:hover,
  a.card.card-toolbox:focus-visible,
  .home-tiles a:hover .card.card-toolbox {
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(0,0,0,.12) !important; /* übersteuert .shadow-sm */
    border-color: var(--nz-contrast) !important;       /* gelber Rand */
    color: var(--nz-contrast);                          /* Text springt in Akzentfarbe */
  }

  /* Text-Inhalte in der Karte ebenfalls akzentuieren */
  .card.card-toolbox:hover .card-title,
  .card.card-toolbox:hover .fw-bold,
  .card.card-toolbox:hover .lead,
  .card.card-toolbox:hover .text-muted,
  a.card.card-toolbox:hover .card-title,
  a.card.card-toolbox:hover .fw-bold,
  a.card.card-toolbox:hover .lead,
  a.card.card-toolbox:hover .text-muted,
  .home-tiles a:hover .card.card-toolbox .card-title,
  .home-tiles a:hover .card.card-toolbox .fw-bold,
  .home-tiles a:hover .card.card-toolbox .lead,
  .home-tiles a:hover .card.card-toolbox .text-muted {
    color: var(--nz-contrast) !important;
  }

  /* Option: etwas sanftere Hintergrundbetonung beim Hover */
  .card.card-toolbox:hover,
  a.card.card-toolbox:hover,
  .home-tiles a:hover .card.card-toolbox {
    background: color-mix(in srgb, var(--nz-contrast) 8%, var(--nz-surface)) !important;
  }

/* Section subtitles under "Build and stress‑test your plan" */
.section-subtitle{
  margin: 0;                    /* kill default h6 margins */
  padding-bottom: 2px;          /* tiny anchor for the eye */
  font-weight: 700;
  color: var(--nz-primary);     /* brand teal */
  letter-spacing: .2px;
  display: inline-block;
}
.section-subtitle + .row{       /* row immediately after subtitle */
  margin-top: 6px;              /* tight spacing below subtitle */
}

/* Unified tile body — same look for all cards */
.tile-body{
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 120px;          /* keeps small tiles from looking “flat” */
}
.tile-title{                   /* ensure consistent title weight/size */
  font-weight: 700;
  margin-bottom: .25rem;
}
.tile-sub{                     /* consistent subtitle color/size */
  color: var(--nz-muted);
  font-size: .9rem;
}

/* =========================
   Section titles & spacing
   ========================= */
   .section-subtitle{
    font-weight: 700;                     /* make it read as a subheader */
    color: var(--nz-muted);               /* subtle grey-green */
    letter-spacing: .2px;
    margin: 1.25rem 0 .5rem 0;            /* top space, small bottom */
  }

  /* create breathing room after each row of tiles */
  .home-tiles{
    margin-bottom: 1.25rem;               /* space before the next subtitle */
  }

  /* =========================
     Tile cards – consistent sizing & style
     ========================= */
  :root{
    --tile-min-h: 168px;                  /* standard height for all tiles */
  }

  /* make every tile the same height and center its content */
  .home-tiles .card{
    min-height: var(--tile-min-h);
    display: flex;
    flex-direction: column;
  }

  .home-tiles .card .card-body{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;              /* vertical center */
    align-items: center;                  /* horizontal center */
    text-align: center;
    padding: 16px 18px;
  }

  /* headings in the smaller 5 boxes use brand color (not black) */
  .tile-title,
  .home-tiles h6{
    color: var(--nz-primary);
  }

  /* subtitle line below the title in small tiles */
  .tile-sub{
    color: var(--nz-muted);
    font-size: .9rem;
  }

  /* optional: keep the three “icon” tiles visually matched with the small ones */
  .home-tiles .card .mb-2[style*="font-size:2rem"]{
    line-height: 1;
  }

  /* =========================
     Hover (same treatment across all tiles)
     ========================= */
  .home-tiles .card{
    background: var(--nz-surface);
    border: 1px solid var(--nz-border);
    box-shadow: var(--nz-shadow);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  .home-tiles .card:hover{
    transform: translateY(-4px);
    box-shadow: 0 10px 22px rgba(0,0,0,.08);
    border-color: color-mix(in srgb, var(--nz-primary) 32%, var(--nz-border));
  }
  .home-tiles .card:hover .tile-title,
  .home-tiles .card:hover h6{
    color: color-mix(in srgb, var(--nz-primary) 85%, #000);
  }

/* Section subtitles: spacing + brand color */
.section-subtitle{
  font-weight: 700;
  color: var(--nz-primary);
  margin: 1rem 0 .5rem 0;        /* space before, tight after */
  letter-spacing: .2px;
}

/* Space after each tile row so next subtitle doesn’t touch */
.home-tiles{ margin-bottom: 1.25rem; }

/* Default tile height for the first 3 rows (keep as-is) */
.home-tiles .card{
  min-height: 25px;             /* your normal size */
}

/* Compact tiles ONLY for Data & Portfolio Ops */
.tiles-compact .card{
  min-height: 25px;             /* smaller */
}

/* Ensure tile titles use brand color everywhere */
.home-tiles h6.fw-bold,
.tile-title{ color: var(--nz-primary); }

/* Net Zero alert styles */
.alert-nz {
  background-color: #F1F5F5;        /* very light teal-grey background */
  border: 1px solid #699293;        /* PRIMARY border */
  color: #334155;                   /* dark text */
  border-radius: var(--nz-radius);  /* consistent rounded corners */
  padding: 1rem 1.25rem;
  font-size: 0.95rem;
  line-height: 1.5;
}

.alert-nz strong {
  color: #699293;                   /* PRIMARY for emphasis */
  font-weight: 600;
}

.nz-brand {
  color: var(--nz-primary, #699293); /* greygreen */
  font-size: 3.5rem;                 /* larger font */
  font-weight: 400;                  /* regular */
  margin: 0;
}
.nz-brand strong {
  font-weight: 700;                  /* bold for 'scout' */
}