/* (c) Tax Policy Associates Ltd 2025 */
:root {
  --primary-blue: #1133AF;
  --light-gray: #f8f9fa;
  --medium-gray: #dee2e6;
  --dark-gray: #495057;
  --text-color: #212529;
  --card-shadow: 0 6px 20px rgba(0, 0, 0, 0.07);
  --border-radius: 12px;
  --transition-speed: 0.3s;
}

*{box-sizing:border-box}

body{
  font-family:'Poppins',sans-serif;
  line-height:1.6;
  color:var(--text-color);
  background:var(--light-gray);
  margin:0;
  padding:20px;
}

body.hide-header-on-embed #app-header{
  display:none;
}

.container{
  max-width:1100px;
  margin:20px auto;
  padding:30px 40px;
  background:#fff;
  border-radius:var(--border-radius);
  box-shadow:var(--card-shadow);
  position:relative;
}

header{
  display:flex;align-items:center;flex-wrap:wrap;gap:20px;
  border-bottom:2px solid var(--medium-gray);padding-bottom:20px;margin-bottom:30px
}
.logo-img{height:50px}
header h1{color:var(--primary-blue);font-size:clamp(1.5rem,4vw,2rem);margin:0;font-weight:700}

h2{color:var(--primary-blue);margin:0 0 16px 0; font-size: 1.5rem;}

.label-desktop{display:inline}
.label-mobile{display:none}

/* Style for controls box */
#controls {
  background:var(--light-gray); /* #f8f9fa */
  border:1px solid var(--medium-gray);
  border-radius:12px;
  padding:16px;
  margin-top:24px;
}

/* Impact box styling */
#impact-box {
  background: #f1f3f5; /* Slightly darker shade for distinction */
  border:1px solid var(--medium-gray);
  border-radius:12px;
  padding:16px;
  margin-top:24px;
}


#controls .control-group + .control-group {
  margin-top: 16px;
}

.control-group.hidden{visibility:hidden;opacity:0;width:0;pointer-events:none;transition:opacity .3s}
.control-group strong{display:block;margin-bottom:8px;color:var(--dark-gray)}
#controls .control-group > label{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:600;
  color:var(--dark-gray);
}
.split-control{
  display:flex;
  align-items:center;
}

input[type="checkbox"]{
  appearance:none;
  -webkit-appearance:none;
  width:20px;
  height:20px;
  border:2px solid var(--medium-gray);
  border-radius:6px;
  background:#fff;
  position:relative;
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease, box-shadow .2s ease;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
input[type="checkbox"]::after{
  content:"";
  position:absolute;
  width:6px;
  height:12px;
  border-right:2px solid #fff;
  border-bottom:2px solid #fff;
  top:50%;
  left:50%;
  transform:translate(-50%, -60%) rotate(45deg) scale(0);
  transform-origin:center;
  transition:transform .2s ease;
}
input[type="checkbox"]:checked{
  background:var(--primary-blue);
  border-color:var(--primary-blue);
  box-shadow:0 0 0 2px rgba(17,51,175,0.15);
}
input[type="checkbox"]:checked::after{
  transform:translate(-50%, -60%) rotate(45deg) scale(1);
}
input[type="checkbox"]:hover{
  border-color:var(--primary-blue);
}
input[type="checkbox"]:focus-visible{
  outline:2px solid rgba(17,51,175,0.5);
  outline-offset:2px;
}

/* Layout for impact box controls */
.impact-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end; /* Align to bottom */
  gap: 16px;
  margin-bottom: 20px;
}
.local-authority-selector {
  flex: 1 1 300px; /* Grow and shrink */
}
.second-home-toggle {
  flex: 0 1 auto; /* Don't grow, just take space */
  padding-bottom: 4px; /* Align text with dropdown */
}
.second-home-toggle label {
  font-weight: 600;
  color: var(--dark-gray);
  cursor: pointer;
  white-space: nowrap; /* Keep checkbox and label on one line */
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.second-home-toggle input {
  margin-right: 0;
}

.local-authority-selector select {
  width: 100%;
  padding: 8px;
  font-size: 1rem;
  border-radius: 6px;
  border: 1px solid var(--medium-gray);
  background-color: #fff;
}

/* On desktop, don't let dropdown get too wide */
@media (min-width: 600px) {
  .local-authority-selector {
    max-width: 400px; 
  }
}

/* Toggle buttons */
.toggle-switch{
  display:flex;flex-wrap:wrap;gap:6px;max-width:100%;background:#e9ecef;border-radius:20px;padding:4px
}
.toggle-switch input{display:none}
.toggle-switch label{
  padding:8px 12px;border-radius:16px;font-weight:600;cursor:pointer;
  flex:1 1 220px;min-width:120px;text-align:center;white-space:normal;word-break:break-word;
  color:var(--dark-gray);
}
.toggle-switch input:checked+label{background:var(--primary-blue);color:#fff}

#h-band-tax-type-control{
  display:flex;
  align-items:center;
  margin-left:12px;
}
#h-band-tax-type-control .toggle-switch{
  flex-wrap:nowrap;
  gap:8px;
}
#h-band-tax-type-control .toggle-switch label{
  flex:0 1 auto;
  min-width:0;
  white-space:nowrap;
  padding:8px 14px;
}

/* Band boundary slider */
.slider-container{padding:36px 8px 40px;margin:8px 0 20px}
#band-slider{height:10px}
#band-slider .noUi-connect{background:var(--primary-blue)}
#band-slider .noUi-handle{height:24px;width:24px;top:-7px;right:-12px;border-radius:50%;background:#fff;border:2px solid var(--primary-blue)}

#band-slider .noUi-tooltip {
  border: none !important;
  box-shadow: none !important;
}

#band-slider { position: relative; }
#band-slider .fixed-start-marker{
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

#band-slider .fixed-start-marker::before{
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--primary-blue);
  opacity: 0.4;
  box-sizing: border-box;
}

#band-slider .fixed-start-marker > span{
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  color: #495057;
  opacity: 0.6;
  white-space: nowrap;
  pointer-events: none;
}


/* Table styles */
.table-container{margin-top:12px;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:1100px;margin-left:auto;margin-right:auto}
table{width:100%;border-collapse:collapse;table-layout:auto}
th,td{padding:12px 10px;border-bottom:1px solid var(--medium-gray);vertical-align:middle;white-space:nowrap}
th{background:var(--primary-blue);color:#fff} /* Default for policy table */
.band-name{font-weight:700}
.bands-table th:nth-child(4),
.bands-table td:nth-child(4),
.bands-table th:nth-child(5),
.bands-table td:nth-child(5),
.bands-table th:nth-child(6),
.bands-table td:nth-child(6){text-align:right}

/* Distinct styling for impact table */
.impact-table th {
  background: transparent;
  color: var(--dark-gray);
  border-bottom: 2px solid var(--medium-gray);
  font-weight: 700;
}

/* Column alignment for impact table */
.impact-table th,
.impact-table td {
  text-align: center;
}

#impact-box .table-container{max-width:680px;margin-left:auto;margin-right:auto}
.impact-range-placeholders{display:none}

[id$="-props"] {
  display: none;
}

.rate-cell{display:flex;align-items:center;gap:8px;min-width:0}
.rate-val{font-weight:700;color:var(--primary-blue);min-width:2.4em;text-align:right}
.rate-suffix{opacity:.7}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:8px;background:var(--medium-gray);
  border-radius:6px;outline:none;cursor:pointer
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:20px;height:20px;background:var(--primary-blue);border-radius:50%
}
input[type=range]::-moz-range-thumb{width:20px;height:20px;background:var(--primary-blue);border-radius:50%;border:none}

.bands-table .rate-cell input[type=range]{
  flex:1 1 320px;
  min-width:200px;
  max-width:420px;
  width:100%;
}

.yield-tooltip{
  position:absolute;
  z-index:1000;
  background:var(--primary-blue);
  color:#fff;
  padding:6px 10px;
  border-radius:6px;
  font-size:0.85rem;
  box-shadow:0 4px 12px rgba(0,0,0,0.15);
  pointer-events:none;
  transform:translate(-50%, -120%);
  opacity:0;
  transition:opacity 0.15s ease;
}
.yield-tooltip::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-6px;
  transform:translateX(-50%);
  border-width:6px;
  border-style:solid;
  border-color:var(--primary-blue) transparent transparent transparent;
}
.yield-tooltip.visible{
  opacity:1;
}

/* Results banner */
#results{margin-top:18px;padding:16px;border-radius:12px;text-align:center;color:#fff;background:linear-gradient(45deg,var(--primary-blue),#3a59c4)}
#results p{margin:0;font-weight:600;opacity:.95}
#results span{display:block;font-size:clamp(1.8rem,6vw,2.6rem);font-weight:700;margin-top:6px}

/* Visibility helpers */
.show-mobile{display:none}
.hide-mobile{display:table-cell}

/* H-Band Toggling (applies to both tables) */
.h-split-row,
#band-slider-container,
#band-slider-label,
#h-band-tax-type-control {
  display: none;
}
.h-bands-split .h-total-row {
  display: none;
}
.h-bands-split .h-split-row {
  display: table-row;
}
.h-bands-split #band-slider-container,
.h-bands-split #band-slider-label {
  display: block;
}
.h-bands-split #h-band-tax-type-control {
  display: block; 
}


/* Mobile compact layout */
@media (max-width: 900px){
  .label-desktop{display:none}
  .label-mobile{display:inline}
  th,td{padding:10px 8px}
  .hide-mobile{display:none !important}
  .show-mobile{display:table-cell !important}
  table{table-layout:fixed}
  input[type=range]{width:100%}
  
  [id$="-props"] {
    display: none !important;
  }
  
  /* Policy table */
  .bands-table th:first-child{width:60px}     /* Band col */
  .bands-table th:nth-child(3){width:auto}    /* Slider col */
  .bands-table .rate-cell input[type=range]{min-width:0;max-width:none}
  
  /* Impact table */
  .impact-table th:first-child{width:60px} /* Band */
  .impact-table th:nth-child(3){width:auto} /* New tax */
  .impact-table th:nth-child(4){width:auto} /* Increase */
  
  /* Ensure mobile cells stay centered */
  .impact-table th,
  .impact-table td {
    text-align: center;
  }
  #controls{
    flex-direction:column;
    align-items:flex-start;
  }
  #h-band-tax-type-control{
    margin-left:0;
  }
}

@media (min-width: 900px){
  #controls{
    display:flex;
    align-items:center;
    gap:24px;
    flex-wrap:wrap;
  }
  #controls .control-group{
    margin-top:0;
  }
}


/* Keep desktop table from overflowing horizontally */
@media (min-width: 901px){
  th, td { white-space: normal; }
  .table-container{ overflow-x: visible; }
}