/* tile-calculator.css — Tile Calculator custom styles */

/* Two-column input grid */
.evvy-tc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* Tile size preset grid */
.evvy-tc-tile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-top: .5rem; }
.evvy-tc-tile-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: .625rem .5rem; border: 2px solid var(--evvy-border-color, #DEE2E6);
  border-radius: var(--evvy-radius, 8px); background: var(--bs-body-bg, #fff);
  cursor: pointer; transition: border-color .2s, background .2s; font-size: .8125rem; font-weight: 500;
}
.evvy-tc-tile-btn:hover { border-color: var(--cluster-dark); }
.evvy-tc-tile-btn.active {
  border-color: var(--cluster-dark); background: var(--cluster-surface);
  color: var(--cluster-dark); font-weight: 700;
}
.evvy-tc-tile-btn .tc-size { font-size: .9375rem; font-weight: 600; }
.evvy-tc-tile-btn .tc-label { font-size: .6875rem; color: var(--evvy-text-secondary, #666); margin-top: .125rem; }

/* Custom tile size fields (hidden until Custom is selected) */
.evvy-tc-custom-size { display: none; margin-top: .75rem; }
.evvy-tc-custom-size.open { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }

/* Grout preset pills (small inline pills) */
.evvy-tc-grout-pills { display: flex; gap: .375rem; flex-wrap: wrap; margin-top: .5rem; }
.evvy-tc-grout-pill {
  padding: .3125rem .625rem; border: 1.5px solid var(--evvy-border-color, #DEE2E6);
  border-radius: 999px; font-size: .75rem; font-weight: 500; cursor: pointer;
  background: var(--bs-body-bg, #fff); transition: border-color .2s, background .2s;
}
.evvy-tc-grout-pill:hover { border-color: var(--cluster-dark); }
.evvy-tc-grout-pill.active {
  border-color: var(--cluster-dark); background: var(--cluster-surface);
  color: var(--cluster-dark); font-weight: 600;
}

/* Grout custom slider */
.evvy-tc-grout-slider { margin-top: .75rem; display: none; }
.evvy-tc-grout-slider.open { display: block; }

/* Pattern chip row with icons */
.evvy-tc-pattern-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin-top: .5rem; }
.evvy-tc-pattern-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: .5rem; border: 2px solid var(--evvy-border-color, #DEE2E6);
  border-radius: var(--evvy-radius, 8px); background: var(--bs-body-bg, #fff);
  cursor: pointer; transition: border-color .2s, background .2s; text-align: center;
}
.evvy-tc-pattern-btn:hover { border-color: var(--cluster-dark); }
.evvy-tc-pattern-btn.active {
  border-color: var(--cluster-dark); background: var(--cluster-surface);
  color: var(--cluster-dark);
}
.evvy-tc-pattern-icon { font-size: 1.25rem; margin-bottom: .1875rem; }
.evvy-tc-pattern-name { font-size: .75rem; font-weight: 600; }
.evvy-tc-pattern-waste { font-size: .625rem; color: var(--evvy-text-secondary, #666); }

/* Thickness pills */
.evvy-tc-thick-row { display: flex; gap: .375rem; flex-wrap: wrap; margin-top: .5rem; }
.evvy-tc-thick-pill {
  padding: .3125rem .625rem; border: 1.5px solid var(--evvy-border-color, #DEE2E6);
  border-radius: 999px; font-size: .75rem; font-weight: 500; cursor: pointer;
  background: var(--bs-body-bg, #fff); transition: border-color .2s, background .2s;
}
.evvy-tc-thick-pill:hover { border-color: var(--cluster-dark); }
.evvy-tc-thick-pill.active {
  border-color: var(--cluster-dark); background: var(--cluster-surface);
  color: var(--cluster-dark); font-weight: 600;
}

/* Waste factor badge */
.evvy-tc-waste-badge {
  display: inline-flex; align-items: center; gap: .375rem;
  padding: .375rem .75rem; border-radius: 999px; font-size: .8125rem; font-weight: 600;
  margin-top: .5rem;
}
.evvy-tc-waste-badge.waste-low { background: #e8f5e9; color: #2e7d32; }
.evvy-tc-waste-badge.waste-mid { background: #fff3e0; color: #ef6c00; }
.evvy-tc-waste-badge.waste-high { background: #fce4ec; color: #c62828; }
[data-bs-theme="dark"] .evvy-tc-waste-badge.waste-low { background: rgba(46,125,50,.18); color: #66bb6a; }
[data-bs-theme="dark"] .evvy-tc-waste-badge.waste-mid { background: rgba(239,108,0,.18); color: #ffa726; }
[data-bs-theme="dark"] .evvy-tc-waste-badge.waste-high { background: rgba(198,40,40,.18); color: #ef5350; }

/* Pattern preview canvas */
.evvy-tc-preview-wrap {
  margin-top: .75rem; border: 1px solid var(--evvy-border-color, #DEE2E6);
  border-radius: var(--evvy-radius-lg, 12px); overflow: hidden; background: var(--bs-body-bg, #fff);
}
.evvy-tc-preview-header {
  font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  color: var(--evvy-text-secondary, #666); padding: .625rem .875rem .375rem;
}
.evvy-tc-preview-canvas { display: block; width: 100%; height: 180px; }

/* Multi-surface area rows */
.evvy-tc-surface-list { margin-top: .5rem; }
.evvy-tc-surface-row {
  display: grid; grid-template-columns: 1fr 80px 80px 36px; gap: .5rem;
  align-items: center; padding: .5rem 0;
  border-bottom: 1px solid var(--evvy-border-color, #DEE2E6);
}
.evvy-tc-surface-row:last-child { border-bottom: none; }
.evvy-tc-surface-row input[type="number"] { text-align: center; }

/* Materials card (reuse shopping-card pattern) */
.evvy-tc-materials-card {
  background: var(--cluster-surface); border: 1px solid var(--evvy-border-color, #DEE2E6);
  border-radius: var(--evvy-radius-lg, 12px); padding: 1rem 1.125rem; margin-top: .75rem;
}
.evvy-tc-materials-header {
  font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  color: var(--evvy-text-secondary, #666); margin-bottom: .625rem;
}
.evvy-tc-mat-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: .3rem 0; font-size: .875rem;
}
.evvy-tc-mat-row span:first-child { color: var(--evvy-text-secondary, #666); }
.evvy-tc-mat-row span:last-child { font-weight: 600; font-variant-numeric: tabular-nums; }

/* Premium: cost estimator card */
.evvy-tc-cost-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-top: .75rem; }
.evvy-tc-cost-card {
  background: var(--bs-body-bg, #fff); border: 1px solid var(--evvy-border-color, #DEE2E6);
  border-radius: var(--evvy-radius-lg, 12px); padding: 1rem; text-align: center;
}
.evvy-tc-cost-label { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--evvy-text-secondary, #666); margin-bottom: .375rem; }
.evvy-tc-cost-value { font-size: 1.125rem; font-weight: 700; color: var(--cluster-dark); }
.evvy-tc-cost-detail { font-size: .75rem; color: var(--evvy-text-secondary, #666); margin-top: .25rem; }

/* Dark mode overrides */
[data-bs-theme="dark"] .evvy-tc-tile-btn { background: var(--evvy-gray-100, #1E1E1E); }
[data-bs-theme="dark"] .evvy-tc-tile-btn.active { background: rgba(255,255,255,.06); }
[data-bs-theme="dark"] .evvy-tc-grout-pill { background: var(--evvy-gray-100, #1E1E1E); }
[data-bs-theme="dark"] .evvy-tc-grout-pill.active { background: rgba(255,255,255,.06); }
[data-bs-theme="dark"] .evvy-tc-pattern-btn { background: var(--evvy-gray-100, #1E1E1E); }
[data-bs-theme="dark"] .evvy-tc-pattern-btn.active { background: rgba(255,255,255,.06); }
[data-bs-theme="dark"] .evvy-tc-thick-pill { background: var(--evvy-gray-100, #1E1E1E); }
[data-bs-theme="dark"] .evvy-tc-thick-pill.active { background: rgba(255,255,255,.06); }
[data-bs-theme="dark"] .evvy-tc-materials-card { background: var(--evvy-gray-100, #1E1E1E); }
[data-bs-theme="dark"] .evvy-tc-cost-card { background: var(--evvy-gray-100, #1E1E1E); }
[data-bs-theme="dark"] .evvy-tc-preview-wrap { background: var(--evvy-gray-100, #1E1E1E); }

/* Mobile breakpoints */
@media (max-width: 575.98px) {
  .evvy-tc-grid { grid-template-columns: 1fr; }
  .evvy-tc-tile-grid { grid-template-columns: repeat(3, 1fr); }
  .evvy-tc-custom-size.open { grid-template-columns: 1fr; }
  .evvy-tc-pattern-grid { grid-template-columns: repeat(2, 1fr); }
  .evvy-tc-cost-grid { grid-template-columns: 1fr; }
  .evvy-tc-surface-row { grid-template-columns: 1fr 1fr; }
  .evvy-tc-surface-row input:first-child { grid-column: 1 / -1; }
  #results-area .evvy-results-row { grid-template-columns: 1fr 1fr !important; }
}