/* سولار دماوند — ماشین حساب خورشیدی
   Version: 1.3.2
*/

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
.sd-wrap {
  font-family: Tahoma, 'Segoe UI', Arial, sans-serif;
  direction: rtl;
  background: linear-gradient(135deg, #f0faf0 0%, #fafff5 100%);
  width: 100%; max-width: 100%; min-width: 0; overflow-x: hidden;
  container-type: inline-size;
  padding: 28px 16px 40px;
}
/* HEADER */
.sd-header { text-align: center; margin-bottom: 28px; }
.sd-header-inner { display: inline-flex; align-items: center; gap: 12px; }
.sd-logo {
  width: 48px; height: 48px; border-radius: 13px;
  background: linear-gradient(135deg, #2e7d32, #43a047);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; flex-shrink: 0; box-shadow: 0 4px 14px rgba(46,125,50,0.32);
}
.sd-brand     { font-size: 22px; font-weight: 700; color: #1b5e20; line-height: 1.2; }
.sd-brand-sub { font-size: 12px; color: #5a7a5a; margin-top: 3px; }

/* LAYOUT */
.sd-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 20px; max-width: 1060px; margin: 0 auto; min-width: 0; }
.sd-card, .sd-right { min-width: 0; }
@media (max-width: 900px) { .sd-grid { grid-template-columns: minmax(0,1fr); } }
@container (max-width: 820px) { .sd-grid { grid-template-columns: minmax(0,1fr); } }

/* CARD */
.sd-card { background: #fff; border-radius: 16px; padding: 22px; border: 1px solid #e0f0e0; box-shadow: 0 2px 16px rgba(46,125,50,0.08); }
.sd-card-title { font-size: 14px; font-weight: 700; color: #1b5e20; margin-bottom: 18px; padding-bottom: 11px; border-bottom: 2px solid #e8f5e9; }
.sd-section-label { font-size: 11px; color: #5a7a5a; margin-bottom: 9px; font-weight: 700; letter-spacing: 0.3px; margin-top: 16px; }

/* SEGMENT TABS */
.sd-seg-tabs { display: flex; gap: 0; margin-bottom: 16px; border-radius: 11px; overflow: hidden; border: 1.5px solid #c8e6c9; }
.sd-seg-tab { flex: 1; padding: 10px 6px; background: #fafafa; color: #666; font-size: 11px; font-weight: 400; cursor: pointer; font-family: Tahoma, Arial, sans-serif; text-align: center; border: none; border-left: 1px solid #c8e6c9; transition: all 0.18s; line-height: 1.4; }
.sd-seg-tab:first-child { border-left: none; }
.sd-seg-tab:hover { background: #f0faf0; }
.sd-seg-tab.active { background: linear-gradient(135deg,#2e7d32,#43a047); color: #fff; font-weight: 700; }
.sd-seg-icon { font-size: 16px; display: block; margin-bottom: 3px; }

/* CONNECTION TABS */
.sd-con-tabs { display: flex; gap: 8px; margin-bottom: 10px; }
.sd-con-tab { flex: 1; min-width: 0; padding: 9px 5px; border-radius: 10px; border: 1.5px solid #e0f0e0; background: #fafafa; color: #555; cursor: pointer; transition: all 0.18s; font-family: Tahoma, Arial, sans-serif; text-align: center; }
.sd-con-tab:hover { border-color: #a5d6a7; background: #f1fbf1; }
.sd-con-tab.active { border-color: #43a047; background: #e8f5e9; }
.sd-con-en { font-size: 12px; font-weight: 700; font-family: Arial, sans-serif; color: #1b5e20; }
.sd-con-fa { font-size: 10px; color: #888; margin-top: 2px; }
.sd-con-tab.active .sd-con-fa { color: #5a7a5a; }
.sd-mode-desc { padding: 9px 12px; background: #f0faf0; border-radius: 8px; font-size: 11px; color: #5a7a5a; border: 1px solid #d0e8d0; margin-bottom: 16px; line-height: 1.7; }

/* APPLIANCE GRID */
.sd-capacity-input-wrap { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 11px; border: 1.5px solid #c8e6c9; background: #fafafa; direction: ltr; }
.sd-capacity-input { width: 100%; min-width: 0; border: none; outline: none; background: transparent; color: #1b5e20; font: 700 21px Tahoma, 'Segoe UI', Arial, sans-serif; text-align: left; }
.sd-capacity-input:focus { color: #2e7d32; }
.sd-capacity-unit { color: #5a7a5a; font-size: 12px; white-space: nowrap; direction: rtl; }
.sd-pump-select { width: 100%; padding: 12px 14px; border-radius: 11px; border: 1.5px solid #c8e6c9; background: #fafafa; color: #1b5e20; outline: none; font: 700 13px Tahoma, 'Segoe UI', Arial, sans-serif; direction: rtl; cursor: pointer; }
.sd-pump-select:focus { border-color: #43a047; background: #fff; }
.sd-off-device-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.sd-off-device { border: 1.5px solid #e8e8e8; background: #fafafa; border-radius: 11px; padding: 9px; min-width: 0; }
.sd-off-device.active { border-color: #43a047; background: #f1fbf1; }
.sd-off-device-head { display: flex; align-items: center; gap: 6px; color: #444; font-size: 11px; font-weight: 700; margin-bottom: 7px; }
.sd-off-device-icon { font-size: 16px; }
.sd-off-controls { display: grid; grid-template-columns: minmax(0,1fr) 72px; gap: 6px; }
.sd-off-controls.two-inputs { grid-template-columns: minmax(0,1fr) 64px 64px; }
.sd-off-select, .sd-off-number { width: 100%; min-width: 0; border: 1px solid #c8e6c9; border-radius: 7px; background: #fff; color: #1b5e20; padding: 7px 6px; outline: none; font: 10px Tahoma, 'Segoe UI', Arial, sans-serif; }
.sd-off-number { direction: ltr; text-align: center; }
.sd-off-field { display: flex; flex-direction: column; gap: 3px; color: #888; font-size: 8px; text-align: center; }
.sd-off-fixed-spec { display: flex; align-items: center; color: #5a7a5a; font-size: 9px; line-height: 1.5; }
@media (max-width: 520px) { .sd-off-device-grid { grid-template-columns: 1fr; } }
.sd-app-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-bottom: 16px; }
@media (max-width: 420px) { .sd-app-grid { grid-template-columns: repeat(2,1fr); } }
.sd-app-btn { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 4px; border-radius: 11px; border: 1.5px solid #e8e8e8; background: #fafafa; cursor: pointer; transition: all 0.18s; font-family: Tahoma, Arial, sans-serif; }
.sd-app-btn:hover { border-color: #a5d6a7; background: #f4fbf4; }
.sd-app-btn.active { border-color: #43a047; background: #e8f5e9; }
.sd-app-btn.active .sd-app-name { color: #1b5e20; font-weight: 700; }
.sd-app-icon { font-size: 20px; line-height: 1; }
.sd-app-name { font-size: 10px; color: #555; text-align: center; line-height: 1.3; }
.sd-app-sub  { font-size: 9px; color: #bbb; }
.sd-app-counter { display: flex; align-items: center; gap: 4px; margin-top: 3px; }
.sd-cnt-btn { width: 20px; height: 20px; border-radius: 5px; border: 1.5px solid #c8e6c9; background: #fff; color: #2e7d32; font-size: 14px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; font-weight: 700; font-family: Tahoma; transition: background 0.15s; }
.sd-cnt-btn:hover { background: #e8f5e9; }
.sd-cnt-num { font-size: 12px; font-weight: 700; color: #2e7d32; min-width: 14px; text-align: center; }

/* POWER TOTAL */
.sd-power-total { background: linear-gradient(135deg, #e8f5e9, #f1fbf1); border: 1.5px solid #a5d6a7; border-radius: 12px; padding: 13px 16px; display: flex; justify-content: space-between; align-items: center; margin-top: 14px; }
.sd-power-label { font-size: 13px; color: #2e7d32; font-weight: 600; }
.sd-power-sub   { font-size: 10px; color: #888; margin-top: 2px; }
.sd-power-num   { font-size: 26px; font-weight: 800; color: #1b5e20; text-align: left; }
.sd-power-unit  { font-size: 11px; color: #5a7a5a; text-align: left; }

/* BATTERY SELECTOR */
.sd-bat-list { display: flex; flex-direction: column; gap: 7px; margin-bottom: 11px; }
.sd-bat-btn { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-radius: 11px; border: 1.5px solid #e8e8e8; background: #fafafa; cursor: pointer; transition: all 0.18s; font-family: Tahoma, Arial, sans-serif; }
.sd-bat-btn:hover { border-color: #a5d6a7; background: #f4fbf4; }
.sd-bat-btn.active { border-color: #43a047; background: #e8f5e9; }
.sd-bat-btn.active .sd-bat-name { color: #1b5e20; font-weight: 700; }
.sd-bat-left { display: flex; align-items: center; gap: 8px; }
.sd-bat-name  { font-size: 11px; color: #444; line-height: 1.4; }
.sd-bat-spec  { font-size: 9px; color: #aaa; display: block; margin-top: 1px; }
.sd-bat-price { font-size: 11px; font-weight: 700; color: #1565C0; white-space: nowrap; }
.sd-bat-counter-row { display: flex; justify-content: space-between; align-items: center; background: #f0faf0; border-radius: 9px; padding: 10px 13px; border: 1px solid #d0e8d0; }
.sd-bat-counter-label { font-size: 12px; color: #2e7d32; font-weight: 600; }
/* پیشنهاد تعداد باتری */
.sd-bat-suggest { font-size: 10px; color: #f9a825; background: #fff8e1; border: 1px solid #ffe082; border-radius: 7px; padding: 6px 10px; margin-top: 8px; line-height: 1.6; display: none; }
.sd-bat-suggest.show { display: block; }

/* RIGHT */
.sd-right { display: flex; flex-direction: column; gap: 12px; }

/* COST BANNER */
.sd-cost-banner { background: linear-gradient(135deg, #2e7d32, #43a047); border-radius: 15px; padding: 18px 22px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 4px 20px rgba(46,125,50,0.28); }
.sd-cost-label { color: #a5d6a7; font-size: 13px; line-height: 1.6; }
.sd-cost-num   { font-size: 24px; font-weight: 800; color: #fff; text-align: left; }
.sd-cost-unit  { font-size: 12px; color: #c8e6c9; text-align: left; }

/* METRICS */
.sd-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sd-metric { background: #fafafa; border-radius: 12px; padding: 12px 11px; border: 1px solid #f0f0f0; }
.sd-metric-icon  { font-size: 16px; margin-bottom: 5px; }
.sd-metric-label { font-size: 10px; color: #888; margin-bottom: 4px; }
.sd-metric-val   { font-size: 15px; font-weight: 700; }
.sd-metric-unit  { font-size: 10px; color: #aaa; margin-top: 2px; }

/* OFF-GRID METRICS (اضافه) */
.sd-offgrid-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; display: none; }
.sd-offgrid-metrics.show { display: grid; }
.sd-metric.accent { background: #fff8e1; border-color: #ffe082; }
.sd-metric.accent .sd-metric-label { color: #795548; }

/* BREAKDOWN CARD */
.sd-breakdown-card { background: #fff; border-radius: 13px; padding: 15px 16px; border: 1px solid #e0f0e0; box-shadow: 0 2px 10px rgba(46,125,50,0.05); }
.sd-breakdown-title { font-size: 12px; font-weight: 700; color: #2e7d32; margin-bottom: 11px; padding-bottom: 8px; border-bottom: 1px solid #e8f5e9; }
.sd-breakdown-list { display: flex; flex-direction: column; gap: 7px; }
.sd-brow { display: flex; justify-content: space-between; align-items: center; font-size: 12px; padding: 6px 10px; background: #f8fdf8; border-radius: 8px; }
.sd-brow-right { display: flex; align-items: center; gap: 7px; color: #444; }
.sd-brow-left  { font-weight: 700; color: #1565C0; white-space: nowrap; }
.sd-bunit      { font-size: 10px; color: #aaa; font-weight: 400; }
.sd-brow-total { background: #e8f5e9 !important; }
.sd-brow-total .sd-brow-right { color: #1b5e20; font-weight: 700; }
.sd-brow-total .sd-brow-left  { color: #1b5e20; font-size: 14px; }

/* SUMMARY */
.sd-summary-card { background: #fff; border-radius: 13px; padding: 15px 16px; border: 1px solid #e0f0e0; }
.sd-summary-title { font-size: 12px; font-weight: 700; color: #2e7d32; margin-bottom: 10px; }
.sd-summary-list  { display: flex; flex-direction: column; gap: 6px; }
.sd-summary-row { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: #555; padding: 5px 8px; background: #f8fdf8; border-radius: 7px; }
.sd-summary-row-r { display: flex; align-items: center; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.sd-summary-kw    { color: #2e7d32; font-weight: 600; flex-shrink: 0; }
.sd-empty-msg     { font-size: 12px; color: #bbb; text-align: center; padding: 14px 0; }

/* FOOTER */
.sd-footer { text-align: center; margin-top: 24px; font-size: 11px; color: #bbb; line-height: 1.8; max-width: 1060px; margin-left: auto; margin-right: auto; }

/* RESPONSIVE */
@media (max-width: 600px) {
  .sd-wrap { padding: 18px 10px 28px; }
  .sd-header { margin-bottom: 18px; }
  .sd-card { padding: 16px; border-radius: 13px; }
  .sd-grid { gap: 14px; }
  .sd-con-tabs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; overflow: visible; border: none; }
  .sd-con-tab, .sd-con-tab:first-child { border: 1.5px solid #e0f0e0; border-radius: 9px; }
  .sd-cost-banner { gap: 10px; padding: 15px 16px; }
  .sd-cost-num { font-size: 21px; }
  .sd-brow, .sd-summary-row { gap: 7px; flex-wrap: wrap; }
  .sd-brow-right { min-width: 0; overflow-wrap: anywhere; }
  .sd-brow-left { flex-shrink: 0; margin-inline-start: auto; }
}

@container (max-width: 520px) {
  .sd-card { padding: 16px; }
  .sd-con-tabs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; overflow: visible; border: none; }
  .sd-con-tab, .sd-con-tab:first-child { border: 1.5px solid #e0f0e0; border-radius: 9px; }
  .sd-off-device-grid { grid-template-columns: minmax(0,1fr); }
  .sd-cost-banner { gap: 10px; padding: 15px 16px; }
  .sd-cost-num { font-size: 21px; }
  .sd-brow, .sd-summary-row { gap: 7px; flex-wrap: wrap; }
  .sd-brow-right { min-width: 0; overflow-wrap: anywhere; }
  .sd-brow-left { flex-shrink: 0; margin-inline-start: auto; }
}

@media (max-width: 380px) {
  .sd-wrap { padding-inline: 7px; }
  .sd-card { padding: 12px; }
  .sd-brand { font-size: 19px; }
  .sd-brand-sub { font-size: 10px; }
  .sd-logo { width: 42px; height: 42px; font-size: 23px; }
  .sd-seg-tab { padding-inline: 3px; font-size: 10px; }
  .sd-cost-banner, .sd-power-total { padding-inline: 12px; }
  .sd-cost-label, .sd-power-label { font-size: 11px; }
  .sd-cost-num { font-size: 19px; }
  .sd-metrics, .sd-offgrid-metrics { gap: 7px; }
  .sd-metric { padding: 10px 8px; }
  .sd-off-controls.two-inputs { grid-template-columns: minmax(0,1fr) 58px 58px; }
}