@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700&display=swap');

/* ══════════════════════════════════════════════
   THEME: تهران حسابدار — آبی  (blue)
   ════════════════════════════════════════════════ */

/* box-sizing forced; margin/padding reset intentionally has NO !important so
   every component rule with !important wins over this baseline reset.
   (Specificity of "#sc1405-wrap *" = 100 beats class selectors = 10, so if
   the reset also used !important it would override ALL component padding.) */
#sc1405-wrap *, #sc1405-wrap *::before, #sc1405-wrap *::after {
  box-sizing: border-box !important; margin: 0; padding: 0;
}
#sc1405-wrap {
  font-family: 'Vazirmatn', Tahoma, sans-serif !important;
  direction: rtl !important; font-size: 14px !important; line-height: 1.6 !important;
  color: #16222e !important; max-width: 980px !important; margin: 0 auto !important; padding: 0 0 40px !important;
}

/* ── Hero ── */
.sc-hero {
  background: linear-gradient(135deg, #0c3c66 0%, #1565a8 55%, #2e9bd6 100%) !important;
  border-radius: 16px !important; padding: 28px 32px !important; margin-bottom: 20px !important;
  position: relative !important; overflow: hidden !important;
}
.sc-hero::before {
  content: '' !important; position: absolute !important; top: -50px !important; left: -50px !important;
  width: 220px !important; height: 220px !important; background: rgba(255,255,255,0.07) !important; border-radius: 50% !important;
}
.sc-hero-inner { display: flex !important; align-items: center !important; gap: 18px !important; position: relative !important; z-index: 1 !important; }
.sc-hero-icon {
  width: 60px !important; height: 60px !important; background: rgba(255,255,255,0.15) !important;
  border-radius: 14px !important; display: flex !important; align-items: center !important; justify-content: center !important;
  flex-shrink: 0 !important; color: #fff !important;
}
.sc-hero-title { font-size: 22px !important; font-weight: 700 !important; color: #fff !important; margin-bottom: 4px !important; }
.sc-hero-sub { font-size: 13px !important; color: rgba(255,255,255,0.82) !important; }
.sc-hero-badge {
  margin-right: auto !important; background: rgba(255,255,255,0.2) !important; color: #fff !important;
  font-size: 12px !important; padding: 5px 14px !important; border-radius: 20px !important; font-weight: 500 !important;
}

/* ── Cards ── */
.sc-card {
  background: #fff !important; border: 1px solid #dce8f3 !important; border-radius: 14px !important;
  padding: 22px 26px !important; margin-bottom: 14px !important;
  box-shadow: 0 1px 6px rgba(12,60,102,0.06) !important;
}
.sc-card-output { border-color: #b9d7ef !important; background: #fbfdff !important; }
.sc-card-result { background: #f3f9fd !important; border-color: #a9cce9 !important; }

.sc-card-header {
  display: flex !important; align-items: center !important; gap: 9px !important;
  font-size: 13px !important; font-weight: 700 !important; color: #0c3c66 !important;
  margin-bottom: 18px !important; padding-bottom: 12px !important;
  border-bottom: 2px solid #e0eef9 !important;
}
.sc-card-header svg { flex-shrink: 0 !important; color: #1565a8 !important; }
.sc-readonly-note {
  margin-right: auto !important; font-size: 11px !important; font-weight: 400 !important; color: #7c8a98 !important;
  background: #eef3f8 !important; padding: 3px 10px !important; border-radius: 20px !important;
}
.sc-month-pill {
  margin-right: auto !important; font-size: 11px !important; font-weight: 700 !important; color: #0c3c66 !important;
  background: #cfe3f6 !important; padding: 3px 14px !important; border-radius: 20px !important;
}

/* ── Grid ── */
.sc-grid { display: grid !important; gap: 14px !important; }
.sc-grid-2 { grid-template-columns: repeat(2,1fr) !important; }
.sc-grid-3 { grid-template-columns: repeat(3,1fr) !important; }
.sc-grid-4 { grid-template-columns: repeat(4,1fr) !important; }

@media (max-width: 800px) {
  .sc-grid-4 { grid-template-columns: repeat(2,1fr) !important; }
  .sc-grid-3 { grid-template-columns: repeat(2,1fr) !important; }
  .sc-hero { padding: 20px 18px !important; } .sc-hero-title { font-size: 17px !important; }
  .sc-card { padding: 16px 18px !important; }
}
@media (max-width: 480px) {
  .sc-grid-4, .sc-grid-3, .sc-grid-2 { grid-template-columns: 1fr !important; }
}

/* ── Fields ── */
.sc-field { display: flex !important; flex-direction: column !important; gap: 7px !important; justify-content: flex-end !important; }
/* Respect JS show/hide toggling (e.g. shift-type field) despite the !important above */
#sc1405-wrap .sc-field[style*="display:none"],
#sc1405-wrap .sc-field[style*="display: none"] { display: none !important; }
.sc-field label {
  font-size: 12px !important; color: #46586c !important; font-weight: 600 !important;
  display: flex !important; align-items: center !important; gap: 5px !important; flex-wrap: wrap !important;
  min-height: 17px !important; line-height: 1.5 !important;
}
.req { color: #c0392b !important; }
.sc-editable-tag {
  font-size: 10px !important; background: #dceaf7 !important; color: #1565a8 !important;
  padding: 2px 7px !important; border-radius: 10px !important; font-weight: 500 !important;
}

#sc1405-wrap input[type="text"],
#sc1405-wrap input[type="number"],
#sc1405-wrap select {
  width: 100% !important; height: 42px !important; font-family: 'Vazirmatn', Tahoma, sans-serif !important;
  font-size: 13px !important; direction: rtl !important; padding: 0 13px !important;
  border: 1.5px solid #c3d3e3 !important; border-radius: 9px !important;
  background: #fff !important; color: #16222e !important; outline: none !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}
/* Numeric & computed fields read cleanly right-aligned with LTR digits */
#sc1405-wrap input[type="number"],
#sc1405-wrap input[readonly] {
  direction: ltr !important; text-align: right !important; font-variant-numeric: tabular-nums !important;
}
#sc1405-wrap input:focus, #sc1405-wrap select:focus {
  border-color: #1565a8 !important; box-shadow: 0 0 0 3px rgba(21,101,168,0.14) !important;
}
#sc1405-wrap input[readonly] {
  background: #eef4fa !important; color: #5a6b7d !important;
  cursor: default !important; border-color: #d4e3f1 !important;
}
.sc-editable-out { border-color: #8fc0e6 !important; background: #f1f8fe !important; }

/* ── Radios ── */
.sc-radio-group { display: flex !important; gap: 8px !important; flex-wrap: wrap !important; }
.sc-radio {
  display: flex !important; align-items: center !important; gap: 7px !important; font-size: 13px !important; min-height: 42px !important;
  color: #44525f !important; cursor: pointer !important; padding: 0 18px !important;
  border: 1.5px solid #c3d3e3 !important; border-radius: 9px !important;
  background: #f5f9fc !important; transition: all 0.15s !important; user-select: none !important;
}
.sc-radio input[type="radio"] { display: none !important; }
.sc-radio.active { border-color: #1565a8 !important; background: #dceaf7 !important; color: #0c3c66 !important; font-weight: 700 !important; }

/* ── Slip table ── */
.sc-slip-table { margin-top: 18px !important; border: 1px solid #c6dcef !important; border-radius: 11px !important; overflow: hidden !important; }
.sc-slip-header {
  display: flex !important; justify-content: space-between !important; padding: 10px 18px !important;
  background: #0c3c66 !important; color: #fff !important; font-size: 12px !important; font-weight: 700 !important;
}
#sc-earn-rows .sc-row {
  display: flex !important; justify-content: space-between !important; align-items: center !important;
  padding: 9px 18px !important; font-size: 13px !important; border-bottom: 1px solid #e9f1f9 !important;
}
#sc-earn-rows .sc-row:nth-child(even) { background: #f5f9fd !important; }
#sc-earn-rows .sc-row:last-child { border-bottom: none !important; }
#sc-earn-rows .sc-row .sc-row-val {
  font-weight: 600 !important; color: #1565a8 !important; direction: ltr !important;
  font-variant-numeric: tabular-nums !important; min-width: 120px !important; text-align: left !important;
}
.sc-slip-total {
  display: flex !important; justify-content: space-between !important; padding: 12px 18px !important;
  background: #0c3c66 !important; color: #fff !important; font-weight: 700 !important; font-size: 14px !important;
}
.sc-slip-total span:last-child { direction: ltr !important; }

/* ── Deduction note ── */
.sc-deduct-note {
  font-size: 12px !important; color: #6b4c10 !important; background: #fffaed !important;
  border: 1px solid #f0d88a !important; border-radius: 9px !important;
  padding: 11px 15px !important; margin-bottom: 16px !important; line-height: 1.8 !important;
}
.sc-deduct-note strong { color: #a06800 !important; }

/* ── Summary cards ── */
.sc-summary-grid { display: grid !important; grid-template-columns: repeat(3,1fr) !important; gap: 14px !important; margin-bottom: 18px !important; }
.sc-sum-card {
  background: #f1f6fb !important; border-radius: 11px !important;
  padding: 16px 18px !important; text-align: center !important; border: 1px solid #dce8f3 !important;
}
.sc-sum-label { font-size: 12px !important; color: #6a7a8a !important; margin-bottom: 7px !important; font-weight: 500 !important; }
.sc-sum-val { font-size: 18px !important; font-weight: 700 !important; direction: ltr !important; color: #16222e !important; }
.sc-sum-green { background: #e7f2fb !important; border-color: #a9cce9 !important; }
.sc-sum-green .sc-sum-val { color: #0c3c66 !important; }
.sc-sum-red { background: #fdf0f0 !important; border-color: #f0bcbc !important; }
.sc-sum-red .sc-sum-val { color: #a02020 !important; }

@media (max-width: 480px) { .sc-summary-grid { grid-template-columns: 1fr 1fr !important; } }

/* ── Net bar ── */
.sc-net-bar {
  background: linear-gradient(135deg, #0c3c66, #1c7bc4) !important;
  border-radius: 11px !important; padding: 16px 22px !important;
  display: flex !important; justify-content: space-between !important; align-items: center !important;
  color: #fff !important; font-weight: 700 !important; font-size: 15px !important; margin-bottom: 18px !important;
}
.sc-net-bar .sc-net-amount { font-size: 24px !important; direction: ltr !important; }
@media (max-width: 480px) {
  .sc-net-bar { flex-direction: column !important; gap: 8px !important; text-align: center !important; }
}

/* ── Mobile note ── */
.sc-mobile-note {
  font-size: 12px !important; color: #5f6f7e !important; text-align: center !important;
  background: #f1f6fb !important; border-radius: 8px !important; padding: 9px !important;
}

/* ── Buttons ── */
.sc-actions { display: flex !important; gap: 12px !important; margin-top: 18px !important; flex-wrap: wrap !important; }
.sc-btn {
  display: flex !important; align-items: center !important; justify-content: center !important; gap: 9px !important;
  padding: 13px 26px !important; font-family: 'Vazirmatn', Tahoma, sans-serif !important;
  font-size: 14px !important; font-weight: 700 !important; border-radius: 11px !important;
  cursor: pointer !important; border: none !important; transition: all 0.2s !important; flex: 1 !important; min-width: 200px !important;
}
.sc-btn-primary {
  background: linear-gradient(135deg, #0c3c66, #1c7bc4) !important;
  color: #fff !important; box-shadow: 0 4px 16px rgba(12,60,102,0.3) !important;
}
.sc-btn-primary:hover { transform: translateY(-2px) !important; box-shadow: 0 6px 20px rgba(12,60,102,0.4) !important; }
.sc-btn-primary:active { transform: translateY(0) !important; }
.sc-btn-primary:disabled { opacity: 0.7 !important; cursor: progress !important; transform: none !important; }

/* ══════════════════════════════════════════════
   PDF / PRINT SLIP — فیش حقوقی A4 حرفه‌ای (blue)
   Rendered off-screen at 794×1123px (A4 @ 96dpi),
   rasterized by html2canvas, then placed full-bleed.
   ════════════════════════════════════════════════ */

/* Hidden on screen — JS reveals it off-screen only during capture */
#sc-print-area { display: none; }

.pr-page {
  width: 794px !important; min-height: 1123px !important;
  background: #fff !important; padding: 0 !important; box-sizing: border-box !important;
  font-family: 'Vazirmatn', Tahoma, sans-serif !important; direction: rtl !important; color: #14202b !important;
}
.pr-frame {
  position: relative !important;
  padding: 30px 34px 120px !important; box-sizing: border-box !important;
  border: 2px solid #0c3c66 !important; border-radius: 4px !important;
}

/* Stamp / seal — sits in the 120px bottom padding of pr-frame */
.pr-stamp {
  position: absolute !important; bottom: 28px !important; right: 110px !important;
  width: 160px !important; height: auto !important; opacity: 0.25 !important;
  transform: rotate(-10deg) !important; z-index: 3 !important; pointer-events: none !important;
}

/* Header */
.pr-header {
  background: linear-gradient(135deg, #0c3c66 0%, #1565a8 60%, #2e9bd6 100%) !important;
  -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important;
  color: #fff !important; border-radius: 10px !important;
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  padding: 16px 22px !important; gap: 14px !important;
}
.pr-h-logo {
  background: #fff !important; border-radius: 10px !important; padding: 8px 12px !important;
  display: flex !important; align-items: center !important; flex-shrink: 0 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12) !important;
}
.pr-h-logo .pr-logo { width: 118px !important; height: auto !important; display: block !important; }
.pr-h-title { text-align: center !important; flex: 1 !important; }
.pr-h-title h2 { font-size: 23px !important; font-weight: 700 !important; color: #fff !important; margin: 0 0 3px !important; direction: rtl !important; unicode-bidi: embed !important; }
.pr-h-brand { font-size: 12px !important; font-weight: 600 !important; color: rgba(255,255,255,0.9) !important; }
.pr-h-meta { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 5px !important; flex-shrink: 0 !important; }
.pr-h-month {
  background: rgba(255,255,255,0.18) !important; color: #fff !important;
  font-size: 12px !important; font-weight: 700 !important; padding: 5px 12px !important; border-radius: 20px !important; white-space: nowrap !important;
}
.pr-h-co { font-size: 11px !important; color: rgba(255,255,255,0.85) !important; max-width: 150px !important; text-align: left !important; }

/* Info box */
.pr-info {
  border: 1.5px solid #cfe0f0 !important; border-radius: 8px !important; background: #f6fafe !important;
  padding: 12px 14px !important; margin-top: 14px !important;
  display: grid !important; grid-template-columns: 1fr 1fr 1fr 1fr !important; gap: 10px !important;
}
.pr-info-item { display: flex !important; flex-direction: column !important; gap: 3px !important; }
.pr-info-label { font-size: 9px !important; color: #6a7a8a !important; font-weight: 500 !important; }
.pr-info-value { font-size: 12px !important; font-weight: 700 !important; color: #0c3c66 !important; }

/* Section title */
.pr-sec-title {
  font-size: 12px !important; font-weight: 700 !important; color: #0c3c66 !important;
  margin: 16px 0 8px !important; padding-right: 11px !important;
  border-right: 4px solid #1565a8 !important;
}

/* Work summary row */
.pr-work-row {
  background: linear-gradient(135deg, #0c3c66, #1c7bc4) !important;
  -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important;
  color: #fff !important; border-radius: 8px !important; overflow: hidden !important;
  display: grid !important; grid-template-columns: repeat(6, 1fr) !important;
  text-align: center !important;
}
.pr-work-cell { padding: 10px 4px !important; border-left: 1px solid rgba(255,255,255,0.16) !important; }
.pr-work-cell:last-child { border-left: none !important; }
.pr-work-num { font-size: 16px !important; font-weight: 700 !important; color: #fff !important; }
.pr-work-lbl { font-size: 9px !important; color: rgba(255,255,255,0.85) !important; margin-top: 3px !important; }

/* Two-column slip table — natural height rows, no flex-grow stretch */
.pr-table {
  margin-top: 12px !important; border: 1.5px solid #0c3c66 !important; border-radius: 8px !important;
  overflow: hidden !important;
}
.pr-thead { display: grid !important; grid-template-columns: 1fr 1fr !important; }
.pr-thead-cell {
  background: #0c3c66 !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important;
  color: #fff !important; padding: 9px 14px !important; font-size: 11px !important; font-weight: 700 !important;
  display: flex !important; justify-content: space-between !important;
}
.pr-thead-ded { background: #1c4f7e !important; border-right: 1px solid rgba(255,255,255,0.25) !important; }
.pr-tbody { display: block !important; }
.pr-trow { display: grid !important; grid-template-columns: 1fr 1fr !important; border-top: 1px solid #e3eef8 !important; }
.pr-trow:first-child { border-top: none !important; }
.pr-trow:nth-child(even) { background: #f5f9fd !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
.pr-cell {
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  padding: 6px 14px !important; font-size: 11px !important; color: #2a3a48 !important;
  min-height: 28px !important;
}
.pr-cell-ded { border-right: 1px solid #e3eef8 !important; }
.pr-cell-lbl { font-weight: 500 !important; }
.pr-cell-val { font-weight: 700 !important; direction: ltr !important; color: #1565a8 !important; font-variant-numeric: tabular-nums !important; }
.pr-cell-val.ded { color: #c0392b !important; }

/* Totals */
.pr-totals { display: grid !important; grid-template-columns: 1fr 1fr !important; margin-top: 8px !important; gap: 8px !important; }
.pr-total-cell {
  background: #1565a8 !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important;
  color: #fff !important; border-radius: 8px !important;
  display: flex !important; justify-content: space-between !important; align-items: center !important;
  padding: 10px 16px !important; font-size: 12px !important; font-weight: 700 !important;
}
.pr-total-cell span:last-child { direction: ltr !important; font-size: 14px !important; }
.pr-total-ded { background: #b23a3a !important; }

/* Net pay bar */
.pr-net {
  background: linear-gradient(135deg, #0c3c66, #1c7bc4) !important;
  -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important;
  color: #fff !important; border-radius: 10px !important;
  display: flex !important; justify-content: space-between !important; align-items: center !important;
  padding: 14px 22px !important; margin-top: 10px !important;
}
.pr-net-label { font-size: 14px !important; font-weight: 700 !important; color: #fff !important; }
.pr-net-amount { font-size: 22px !important; font-weight: 700 !important; direction: ltr !important; color: #fff !important; }

/* Footer — sits above the 120px bottom padding where the stamp lives */
.pr-footer {
  text-align: center !important; font-size: 8.5px !important; color: #8a98a6 !important;
  margin-top: 14px !important; padding-top: 10px !important; border-top: 1px solid #e3eef8 !important;
}

/* Browser-print fallback (only if jsPDF/html2canvas fail to load) */
@media print {
  body * { visibility: hidden !important; }
  #sc-print-area, #sc-print-area * { visibility: visible !important; }
  #sc-print-area {
    display: block !important; position: fixed !important; top: 0 !important; left: 0 !important;
    width: 794px !important; direction: rtl !important;
  }
  @page { margin: 0 !important; size: A4 portrait !important; }
}