/* =========================================================
   CONVEY CALC
   PNEUMATIC CONVEYING CALCULATOR
   INDUSTRIAL EDITION

   Calculator-specific styles only.
   All selectors are scoped under .calculator-page.
========================================================= */

/* =========================================================
   CALCULATOR VARIABLES
========================================================= */

.calculator-page {
  --calc-bg: #f2f4f5;
  --calc-surface: #ffffff;
  --calc-surface-dark: #182126;
  --calc-surface-darker: #11181c;

  --calc-border: #d9dee1;
  --calc-border-dark: #303b41;

  --calc-text: #1d272c;
  --calc-text-light: #68757c;
  --calc-text-white: #f4f7f8;

  --calc-accent: #e39a28;
  --calc-accent-dark: #bd7812;
  --calc-accent-soft: #fff3df;

  --calc-success: #3d9b68;
  --calc-warning: #d48721;
  --calc-danger: #bd4d4d;

  --calc-radius: 6px;
  --calc-shadow: 0 8px 25px rgba(22, 32, 38, 0.07);

  --calc-container: 1180px;

  background: var(--calc-bg);
  color: var(--calc-text);
}

/* =========================================================
   CALCULATOR BASE
========================================================= */

.calculator-page button,
.calculator-page input,
.calculator-page select {
  font: inherit;
}

.calculator-page button {
  cursor: pointer;
}

/* =========================================================
   MAIN
========================================================= */

.calculator-page .main-content {
  padding-top: 38px;
  padding-bottom: 60px;
}

.calculator-page .calculator-layout {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1.15fr);

  gap: 22px;

  align-items: start;
}

/* =========================================================
   PANELS
========================================================= */

.calculator-page .panel {
  background: var(--calc-surface);

  border: 1px solid var(--calc-border);

  border-radius: var(--calc-radius);

  box-shadow: var(--calc-shadow);
}

.calculator-page .input-panel,
.calculator-page .results-panel {
  min-height: 100%;
}

.calculator-page .panel-header {
  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 20px;

  padding: 22px 24px;

  border-bottom: 1px solid var(--calc-border);
}

.calculator-page .panel-kicker {
  display: block;

  margin-bottom: 4px;

  color: var(--calc-accent-dark);

  font-size: 10px;

  font-weight: 900;

  letter-spacing: 1.6px;
}

.calculator-page .panel-header h2 {
  margin: 0;

  color: var(--calc-text);

  font-size: 20px;

  line-height: 1.2;
}

/* =========================================================
   STATUS
========================================================= */

.calculator-page .status-dot,
.calculator-page .result-status,
.calculator-page .comparison-note {
  display: inline-flex;

  align-items: center;

  padding: 5px 8px;

  border-radius: 3px;

  font-size: 9px;

  font-weight: 900;

  letter-spacing: 1px;
}

.calculator-page .status-dot {
  color: var(--calc-success);

  background: #edf8f1;
}

/* =========================================================
   FORM
========================================================= */

.calculator-page .form-grid {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 18px;

  padding: 24px;
}

.calculator-page .form-group {
  min-width: 0;
}

.calculator-page .form-group.full-width {
  grid-column: 1 / -1;
}

.calculator-page .form-group label {
  display: block;

  margin-bottom: 7px;

  color: #36444a;

  font-size: 12px;

  font-weight: 800;
}

.calculator-page .form-group label span {
  color: #7d898f;

  font-weight: 500;
}

.calculator-page .form-group input,
.calculator-page .form-group select {
  width: 100%;

  height: 44px;

  padding: 0 12px;

  color: #202b30;

  background: #fbfcfc;

  border: 1px solid #cfd6d9;

  border-radius: 4px;

  outline: none;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

.calculator-page .form-group input:hover,
.calculator-page .form-group select:hover {
  border-color: #aeb8bd;
}

.calculator-page .form-group input:focus,
.calculator-page .form-group select:focus {
  background: #ffffff;

  border-color: var(--calc-accent);

  box-shadow: 0 0 0 3px rgba(227, 154, 40, 0.12);
}

.calculator-page .field-note {
  display: block;

  margin-top: 6px;

  color: #89949a;

  font-size: 10px;
}

/* =========================================================
   BUTTONS
========================================================= */

.calculator-page .input-actions {
  display: flex;

  align-items: center;

  gap: 10px;

  padding: 0 24px 24px;
}

.calculator-page .primary-button,
.calculator-page .secondary-button {
  height: 44px;

  border-radius: 4px;

  font-size: 12px;

  font-weight: 800;
}

.calculator-page .primary-button {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 18px;

  flex: 1;

  padding: 0 18px;

  color: #1b1d1e;

  background: var(--calc-accent);

  border: 1px solid var(--calc-accent);

  transition:
    background 0.2s ease,
    transform 0.2s ease;
}

.calculator-page .primary-button:hover {
  background: #eda83a;

  transform: translateY(-1px);
}

.calculator-page .button-arrow {
  font-size: 17px;
}

.calculator-page .secondary-button {
  padding: 0 18px;

  color: #59666c;

  background: #ffffff;

  border: 1px solid var(--calc-border);
}

.calculator-page .secondary-button:hover {
  background: #f5f7f7;
}

/* =========================================================
   RESULTS
========================================================= */

.calculator-page .results-grid {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 12px;

  padding: 20px 24px;
}

.calculator-page .result-card {
  padding: 18px;

  background: #f7f9f9;

  border: 1px solid #e0e5e7;

  border-radius: 5px;
}

.calculator-page .result-card.highlight-card {
  grid-column: 1 / -1;

  background: linear-gradient(135deg, #222f35, #172126);

  border-color: #29373d;
}

.calculator-page .result-label {
  margin-bottom: 8px;

  color: #718087;

  font-size: 10px;

  font-weight: 900;

  letter-spacing: 1px;

  text-transform: uppercase;
}

.calculator-page .highlight-card .result-label {
  color: #9ca9ae;
}

.calculator-page .result-value {
  display: flex;

  align-items: baseline;

  gap: 6px;

  color: var(--calc-text);

  font-size: 29px;

  font-weight: 800;

  line-height: 1.1;
}

.calculator-page .highlight-card .result-value {
  color: #ffffff;
}

.calculator-page .result-value small {
  color: #859198;

  font-size: 11px;

  font-weight: 700;
}

.calculator-page .highlight-card .result-value small {
  color: var(--calc-accent);
}

.calculator-page .result-description {
  margin-top: 8px;

  color: #89969c;

  font-size: 10px;
}

.calculator-page .result-status {
  color: #8b969b;

  background: #f1f3f4;
}

/* =========================================================
   SUMMARY
========================================================= */

.calculator-page .summary-box {
  margin: 0 24px 24px;

  padding: 16px;

  background: #f5f7f7;

  border: 1px solid #e0e5e7;

  border-radius: 5px;
}

.calculator-page .summary-title {
  margin-bottom: 13px;

  color: #6c787e;

  font-size: 9px;

  font-weight: 900;

  letter-spacing: 1.4px;
}

.calculator-page .summary-grid {
  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 13px 20px;
}

.calculator-page .summary-grid div {
  display: flex;

  flex-direction: column;

  gap: 2px;
}

.calculator-page .summary-grid span {
  color: #8b969b;

  font-size: 10px;
}

.calculator-page .summary-grid strong {
  color: #2c383d;

  font-size: 12px;
}

/* =========================================================
   COMPARISON
========================================================= */

.calculator-page .comparison-panel {
  margin-top: 22px;
}

.calculator-page .comparison-note {
  color: #8a641e;

  background: var(--calc-accent-soft);
}

.calculator-page .table-wrapper {
  width: 100%;

  overflow-x: auto;
}

.calculator-page .comparison-table {
  width: 100%;

  min-width: 760px;

  border-collapse: collapse;
}

.calculator-page .comparison-table th {
  padding: 14px 16px;

  color: #647178;

  background: #f4f6f7;

  border-bottom: 1px solid var(--calc-border);

  font-size: 10px;

  font-weight: 900;

  text-align: left;

  text-transform: uppercase;

  letter-spacing: 0.7px;
}

.calculator-page .comparison-table td {
  padding: 15px 16px;

  color: #3a474d;

  border-bottom: 1px solid #e6eaeb;

  font-size: 12px;
}

.calculator-page .comparison-table tbody tr:last-child td {
  border-bottom: 0;
}

.calculator-page .comparison-table tbody tr:hover {
  background: #fafbfb;
}

.calculator-page .comparison-table td:first-child {
  color: #202c31;

  font-weight: 800;
}

.calculator-page .comparison-table .empty-row {
  padding: 40px !important;

  color: #89949a !important;

  text-align: center;
}

.calculator-page .comparison-table .selected-row {
  background: #fff8eb;
}

/* =========================================================
   ASSESSMENT
========================================================= */

.calculator-page .assessment {
  display: inline-flex;

  padding: 4px 7px;

  border-radius: 3px;

  font-size: 9px;

  font-weight: 900;

  letter-spacing: 0.4px;
}

.calculator-page .assessment.good {
  color: #317851;

  background: #eaf6ee;
}

.calculator-page .assessment.low {
  color: #9b661d;

  background: #fff4df;
}

.calculator-page .assessment.high {
  color: #a54242;

  background: #faeaea;
}

/* =========================================================
   ENGINEERING NOTE
========================================================= */

.calculator-page .engineering-note {
  display: flex;

  gap: 14px;

  margin-top: 22px;

  padding: 18px 20px;

  background: #fffdf8;

  border: 1px solid #eadfc8;

  border-left: 4px solid var(--calc-accent);

  border-radius: 4px;
}

.calculator-page .note-icon {
  flex: 0 0 auto;

  width: 23px;
  height: 23px;

  display: grid;

  place-items: center;

  color: #805817;

  background: #f9e9c9;

  border-radius: 50%;

  font-size: 12px;

  font-weight: 900;
}

.calculator-page .engineering-note strong {
  display: block;

  margin-bottom: 4px;

  color: #51452e;

  font-size: 11px;

  text-transform: uppercase;

  letter-spacing: 0.7px;
}

.calculator-page .engineering-note p {
  margin: 0;

  color: #776f60;

  font-size: 11px;

  line-height: 1.7;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {
  .calculator-page .calculator-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  
  .calculator-page .form-grid {
    grid-template-columns: 1fr;
  }

  .calculator-page .form-group.full-width {
    grid-column: auto;
  }

  .calculator-page .results-grid {
    grid-template-columns: 1fr;
  }

  .calculator-page .result-card.highlight-card {
    grid-column: auto;
  }

  .calculator-page .input-actions {
    flex-direction: column;
  }

  .calculator-page .primary-button,
  .calculator-page .secondary-button {
    width: 100%;
  }

  .calculator-page .engineering-note {
    align-items: flex-start;
  }
}