/* ============================================================
   salary-slip.css
   Page styles for the Salary Slip Generator. Shares conventions
   with rent-receipt.css: same toggle, chip, error and status
   classes (renamed ss- instead of rr- to avoid collisions if a
   future page ever loads both). Template/color/logo/signature
   look is copied from Invoice's inline <style> block.
   ============================================================ */

html { scrollbar-gutter: stable; overflow-y: scroll; }

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }

select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238888aa' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
html.dark { color-scheme: dark; }
html:not(.dark) { color-scheme: light; }
select option { background-color: #f9fafb; color: #1a1a2e; }
html.dark select option { background-color: #161625; color: #e8e8f5; }
.ss-input select { padding-right: 22px; background-position: right 0 center; text-overflow: ellipsis; }

/* ---------- range slider (logo size, from Invoice) ---------- */
input[type=range] { -webkit-appearance: none; appearance: none; height: 4px; border-radius: 2px; outline: none; cursor: pointer; background: rgba(0,0,0,.1); }
html.dark input[type=range] { background: rgba(255,255,255,.15); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #2A3AAF; cursor: pointer; border: 2px solid white; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
html.dark input[type=range]::-webkit-slider-thumb { background: #6B7FE8; }
input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #2A3AAF; cursor: pointer; border: 2px solid white; }
html.dark input[type=range]::-moz-range-thumb { background: #6B7FE8; }

/* ---------- template thumbnail selection (from Invoice) ---------- */
.template-card.selected { border-color: #2A3AAF; background: #eef0fb; }
html.dark .template-card.selected { border-color: #6B7FE8; background: #1e2060; }
.color-swatch.selected { outline: 2px solid #1a1a2e; outline-offset: 2px; }
html.dark .color-swatch.selected { outline-color: #e8e8f5; }

/* ---------- input wrapper error state ---------- */
.ss-input.has-error { border-color: #E24B4A !important; }
.ss-error { color: #E24B4A; font-size: 11px; margin-top: 4px; line-height: 1.45; }
.ss-error[hidden] { display: none; }

/* ---------- toggles ---------- */
.quick-note-toggle.is-on { background: #2A3AAF; }
html.dark .quick-note-toggle.is-on { background: #6B7FE8; }
.quick-note-toggle .toggle-knob { transition: transform .15s ease; }
.quick-note-toggle.is-on .toggle-knob { transform: translateX(16px); }
.quick-note-toggle:focus-visible { outline: 2px solid #2A3AAF; outline-offset: 2px; }
.quick-note-row.is-disabled { opacity: .45; }
.quick-note-row.is-disabled .quick-note-toggle { cursor: not-allowed; }

/* ---------- helper notes ---------- */
.ss-note { font-size: 11px; line-height: 1.5; color: #8888aa; margin-top: 6px; }
.ss-note:empty, .ss-note[hidden] { display: none; }
.ss-words { font-size: 11px; color: #8888aa; font-style: italic; margin-top: 6px; min-height: 16px; }

/* ---------- month picker (same system as Rent Receipt) ---------- */
.ss-months-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 16px 0 8px; }
.ss-months-head .ss-months-actions { display: flex; gap: 8px; }
.ss-month-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
@media (min-width: 640px) { .ss-month-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.ss-chip {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 7px 4px; border-radius: 10px; cursor: pointer;
  border: 1px solid rgba(0,0,0,.1); background: #f9fafb; color: #4a4a6a;
  font-size: 12px; font-weight: 600; line-height: 1.15;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.ss-chip .ss-chip-year { font-size: 9.5px; font-weight: 500; color: #aaaacc; margin-top: 2px; }
.ss-chip:hover { border-color: #2A3AAF; }
.ss-chip[aria-pressed="true"] { background: #2A3AAF; border-color: #2A3AAF; color: #fff; }
.ss-chip[aria-pressed="true"] .ss-chip-year { color: rgba(255,255,255,.7); }
.ss-chip:focus-visible { outline: 2px solid #2A3AAF; outline-offset: 2px; }
html.dark .ss-chip { background: #161625; border-color: rgba(255,255,255,.1); color: #9898bb; }
html.dark .ss-chip:hover { border-color: #6B7FE8; }
html.dark .ss-chip[aria-pressed="true"] { background: #6B7FE8; border-color: #6B7FE8; color: #fff; }

.ss-mini-btn {
  white-space: nowrap; font-size: 11px; font-weight: 500; padding: 4px 10px; border-radius: 8px; cursor: pointer;
  background: #eef0fb; color: #2A3AAF; border: 0;
}
.ss-mini-btn.is-quiet { background: #f3f4f6; color: #8888aa; }
.ss-mini-btn:focus-visible { outline: 2px solid #2A3AAF; outline-offset: 2px; }
.ss-mini-btn:disabled { opacity: .45; cursor: not-allowed; }
html.dark .ss-mini-btn { background: #1e2060; color: #b5bef6; }
html.dark .ss-mini-btn.is-quiet { background: #161625; color: #9898bb; }

.ss-month-summary { font-size: 11.5px; color: #4a4a6a; margin-top: 10px; }
.ss-month-summary strong { color: #1a1a2e; font-weight: 600; }
html.dark .ss-month-summary { color: #9898bb; }
html.dark .ss-month-summary strong { color: #e8e8f5; }

/* ---------- earnings method segmented control ---------- */
.ss-mode-toggle { display: inline-flex; gap: 4px; background: #f3f4f6; padding: 3px; border-radius: 10px; }
html.dark .ss-mode-toggle { background: #161625; }
.ss-mode-btn { font-size: 11.5px; font-weight: 600; padding: 6px 12px; border-radius: 8px; cursor: pointer; border: 0; background: transparent; color: #8888aa; }
.ss-mode-btn.is-active { background: #2A3AAF; color: #fff; }
html.dark .ss-mode-btn.is-active { background: #6B7FE8; }

/* ---------- CTC builder rows: toggle + label + % input + live ₹ ---------- */
.ss-pct-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: #f9fafb; border: 1px solid rgba(0,0,0,.08); }
html.dark .ss-pct-row { background: #161625; border-color: rgba(255,255,255,.08); }
.ss-pct-row.is-off { opacity: .55; }
.ss-pct-label { font-size: 12.5px; color: #1a1a2e; flex: 1; min-width: 0; }
html.dark .ss-pct-label { color: #e8e8f5; }
.ss-pct-sub { font-size: 10.5px; color: #8888aa; display: block; margin-top: 1px; }
.ss-pct-field { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.ss-pct-input {
  width: 56px; border: 1px solid rgba(0,0,0,.15); border-radius: 8px; background: #fff;
  padding: 6px 7px; font-size: 13px; color: #1a1a2e; outline: none; text-align: right;
}
.ss-pct-input:disabled { background: transparent; border-style: dashed; color: #aaaacc; cursor: not-allowed; }
.ss-pct-input.has-error { border-color: #E24B4A; }
html.dark .ss-pct-input { background: #1a1a2e; border-color: rgba(255,255,255,.15); color: #e8e8f5; }
.ss-pct-suffix { font-size: 12px; color: #8888aa; }
.ss-pct-amount { font-size: 12px; font-weight: 600; color: #4a4a6a; width: 92px; text-align: right; flex-shrink: 0; }
html.dark .ss-pct-amount { color: #9898bb; }
.ss-special-sub { display: flex; align-items: center; gap: 6px; margin-top: 8px; padding-left: 40px; flex-wrap: wrap; }
.ss-special-manual { width: 100px; border: 1px solid rgba(0,0,0,.15); border-radius: 8px; background: #fff; padding: 6px 9px; font-size: 12.5px; color: #1a1a2e; outline: none; }
html.dark .ss-special-manual { background: #1a1a2e; border-color: rgba(255,255,255,.15); color: #e8e8f5; }
.ss-special-manual.has-error { border-color: #E24B4A; }

/* ---------- employer-side CTC costs (never shown on the slip) ---------- */
.ss-employer-costs { padding: 10px 12px; border-radius: 10px; background: #f9fafb; border: 1px dashed rgba(0,0,0,.12); margin-top: 4px; }
html.dark .ss-employer-costs { background: #161625; border-color: rgba(255,255,255,.15); }
.ss-toggle-line { display: flex; align-items: center; gap: 10px; padding: 5px 0; }

/* ---------- earnings / deductions component rows ---------- */
.ss-comp-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px;
  background: #f9fafb; border: 1px solid rgba(0,0,0,.08);
}
html.dark .ss-comp-row { background: #161625; border-color: rgba(255,255,255,.08); }
.ss-comp-row.is-off { opacity: .55; }
.ss-comp-label { font-size: 12.5px; color: #1a1a2e; flex: 1; min-width: 0; }
html.dark .ss-comp-label { color: #e8e8f5; }
.ss-comp-amount {
  width: 110px; flex-shrink: 0; border: 1px solid rgba(0,0,0,.15); border-radius: 8px;
  background: #fff; padding: 6px 9px; font-size: 13px; color: #1a1a2e; outline: none;
}
.ss-comp-amount:disabled { background: transparent; border-style: dashed; color: #aaaacc; cursor: not-allowed; }
.ss-comp-amount.has-error { border-color: #E24B4A; }
html.dark .ss-comp-amount { background: #1a1a2e; border-color: rgba(255,255,255,.15); color: #e8e8f5; }
html.dark .ss-comp-amount:disabled { background: transparent; color: #4a4a6a; }
.ss-comp-toggle {
  flex-shrink: 0; width: 30px; height: 16px; border-radius: 999px; cursor: pointer; position: relative; border: 0;
  background: rgba(0,0,0,.12);
}
html.dark .ss-comp-toggle { background: rgba(255,255,255,.12); }
.ss-comp-toggle .toggle-knob { position: absolute; left: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: transform .15s ease; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.ss-comp-toggle[aria-pressed="true"] { background: #2A3AAF; }
html.dark .ss-comp-toggle[aria-pressed="true"] { background: #6B7FE8; }
.ss-comp-toggle[aria-pressed="true"] .toggle-knob { transform: translateX(14px); }
.ss-comp-toggle:disabled { cursor: not-allowed; opacity: .5; }
.ss-comp-required { font-size: 9.5px; color: #aaaacc; margin-left: 4px; }

/* ---------- per-month override rows ---------- */
.ss-override-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: #4a4a6a; }
html.dark .ss-override-row { color: #9898bb; }
.ss-override-row .ss-override-month { font-weight: 600; width: 84px; flex-shrink: 0; color: #1a1a2e; }
html.dark .ss-override-row .ss-override-month { color: #e8e8f5; }
.ss-override-field { display: flex; align-items: center; gap: 5px; }
.ss-small-input {
  border: 1px solid rgba(0,0,0,.15); border-radius: 8px; background: #fff;
  padding: 6px 9px; font-size: 12.5px; color: #1a1a2e; outline: none; width: 90px;
}
.ss-small-input:focus { border-color: #2A3AAF; }
html.dark .ss-small-input { background: #1a1a2e; border-color: rgba(255,255,255,.15); color: #e8e8f5; }
html.dark .ss-small-input:focus { border-color: #6B7FE8; }

/* ---------- action buttons ---------- */
.ss-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ss-actions.is-single { grid-template-columns: 1fr; }
.ss-actions.is-single #zipBtn { display: none; }
.ss-btn-busy { opacity: .65; cursor: progress !important; }
.ss-status { font-size: 11.5px; text-align: center; color: #8888aa; min-height: 16px; }
.ss-status.is-error { color: #E24B4A; }
.ss-status.is-success { color: #0F9D6B; }
html.dark .ss-status.is-success { color: #34D399; }
.ss-link-btn { background: none; border: 0; padding: 2px 4px; cursor: pointer; font-size: 11.5px; color: #8888aa; text-decoration: underline; text-underline-offset: 3px; }
.ss-link-btn:hover { color: #E24B4A; }

/* ---------- preview panel ---------- */
@media (min-width: 1024px) {
  #previewPanel { position: sticky; top: 80px; max-height: calc(100vh - 100px); overflow-y: auto; scrollbar-gutter: stable; }
}
.ss-pages { display: flex; flex-direction: column; gap: 16px; }
.ss-page { display: block; width: 100%; height: auto; background: #fff; border-radius: 4px; box-shadow: 0 4px 16px -4px rgba(20,20,50,.18); }
.ss-page-caption { font-size: 10px; color: #aaaacc; text-align: center; margin-top: -8px; }
.ss-preview-empty { font-size: 13px; color: #aaaacc; text-align: center; padding: 72px 16px; }

@media (prefers-reduced-motion: reduce) {
  .quick-note-toggle .toggle-knob, .ss-chip, .ss-comp-toggle .toggle-knob { transition: none; }
}