/* ═══════════════════════════════════════════════════════════════════════
   SALAM HR · MONTHLY TARGET ACKNOWLEDGEMENT (employee)
   Namespaced .ta- so nothing collides with the app's own styles.
   ═══════════════════════════════════════════════════════════════════════ */

.ta-sec {
  font-size: 13px;
  font-weight: 700;
  color: #EAF2EE;
  margin: 20px 0 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ta-sec::before {
  content: '';
  width: 3px;
  height: 14px;
  border-radius: 2px;
  background: #3DD68C;
}

.ta-hint {
  font-size: 12px;
  color: #6F9A8E;
  line-height: 1.7;
  margin-bottom: 8px;
}

.ta-empty {
  padding: 34px 18px;
  text-align: center;
  color: #8FB3A8;
  font-size: 13.5px;
  line-height: 1.9;
}

/* ─── The form itself ───────────────────────────────────────────────── */
/* White on purpose: this is a piece of paper HR will recognise, and the
   preview should look like the thing that gets filed, not like the app. */

.ta-paper {
  background: #fff;
  color: #1a1a1a;
  border-radius: 12px;
  padding: 20px 18px;
  font-size: 13px;
  line-height: 1.9;
  direction: rtl;
}

.ta-paper p { margin: 0 0 10px; }
.ta-paper .ta-strong { font-weight: 700; }

/* the logo sits alone above the text, as on the original letterhead —
   floating it next to the greeting made them overlap */
.ta-paper-logo { text-align: left; margin: 0 0 18px; }
.ta-paper-logo img { width: 62px; height: auto; display: inline-block; }

.ta-tbl {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 14px;
}

.ta-tbl td {
  border: 1px solid #999;
  padding: 9px 11px;
  font-size: 12.5px;
}

.ta-tbl .ta-val {
  width: 34%;
  text-align: center;
  font-weight: 700;
  font-size: 15px;
}

.ta-sign-tbl td:first-child { width: 40%; font-weight: 700; }
.ta-sig-cell { height: 46px; }
.ta-sig-cell img { max-height: 40px; max-width: 100%; }

/* ─── Signature pad ─────────────────────────────────────────────────── */

.ta-pad-wrap {
  position: relative;
  background: #fff;
  border: 2px dashed #2A6450;
  border-radius: 12px;
  overflow: hidden;
}

.ta-pad {
  display: block;
  width: 100%;
  height: 190px;
  touch-action: none;          /* the finger draws, it does not scroll */
  cursor: crosshair;
}

.ta-pad-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9bb5ac;
  font-size: 14px;
  pointer-events: none;
}

/* ─── Buttons ───────────────────────────────────────────────────────── */

.ta-btn {
  flex: 1;
  width: 100%;
  padding: 14px;
  border-radius: 13px;
  border: none;
  background: linear-gradient(135deg, #3DD68C, #2E9E78);
  color: #05221B;
  font-size: 15px;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
}

.ta-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.ta-btn.ghost {
  background: transparent;
  border: 1px solid #1C4A3E;
  color: #8FB3A8;
}

/* ─── Messages ──────────────────────────────────────────────────────── */

.ta-msg {
  display: none;
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #FCA5A5;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  line-height: 1.7;
}

.ta-msg.show { display: block; }

.ta-msg.ok {
  background: rgba(61, 214, 140, 0.14);
  border-color: rgba(61, 214, 140, 0.45);
  color: #3DD68C;
}

/* ─── Signed state ──────────────────────────────────────────────────── */

.ta-done {
  background: rgba(61, 214, 140, 0.12);
  border: 1px solid rgba(61, 214, 140, 0.35);
  border-radius: 14px;
  padding: 20px;
  text-align: center;
  margin-bottom: 16px;
}

.ta-done-icon { font-size: 30px; color: #3DD68C; margin-bottom: 6px; }
.ta-done-title { font-size: 15px; font-weight: 800; color: #EAF2EE; }
.ta-done-sub { font-size: 12.5px; color: #8FB3A8; margin-top: 5px; line-height: 1.7; }

/* ─── Pending dot on the quick action ───────────────────────────────── */

#openTargetAckBtn { position: relative; }

.ta-dot {
  position: absolute;
  top: 10px;
  inset-inline-end: 10px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #EF4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.22);
}

@keyframes taNudge {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-6px); }
  75%      { transform: translateX(6px); }
}

.ta-nudge { animation: taNudge 0.22s ease; }

@media (max-width: 480px) {
  .ta-paper { font-size: 12px; padding: 16px 14px; }
  .ta-tbl td { padding: 8px 9px; font-size: 11.5px; }
}

/* the header lines read as a short address and sit centred; the labels
   above each target box stay right-aligned with their box */
.ta-paper .ta-centre { text-align: center; }
.ta-paper .ta-greet { margin-bottom: 18px; }

/* spacing that mirrors the generated PDF, so the preview is not a
   different-looking version of the same form */
.ta-paper .ta-head { margin-bottom: 26px; }
.ta-paper .ta-lead { margin-bottom: 8px; }
.ta-paper .ta-gap  { margin-bottom: 22px; }
.ta-paper .ta-val  { text-align: center; }