/* ═══════════════════════════════════════════════════════════════════
   PING V3 — TRANSFER TASK PAGE PREMIUM STYLES  |  May 2026
   Enhances the React-rendered /tasks/transfer page to match the
   active tasks page design system.
   ═══════════════════════════════════════════════════════════════════ */

/* Route-scoped tokens for transfer task page */
body[data-section="tasks"] [class*="transfer"] .panel,
.tasks-page [class*="transfer"],
[class*="task-transfer"],
.premium-workflow-console {
  border-radius: 12px !important;
  border-color: #d2dce9 !important;
}

/* ── Page on /tasks/transfer ─────────────────────────────────────── */
body[data-experience-tone="transfer"] .content-area {
  background: transparent !important;
}

/* Hero/header for transfer page */
body[data-experience-tone="transfer"] .module-hero,
body[data-experience-tone="transfer"] .tasks-hero {
  display: grid !important;
  grid-template-columns: minmax(170px, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}

body[data-experience-tone="transfer"] .module-hero h1,
body[data-experience-tone="transfer"] .tasks-hero h1,
body[data-experience-tone="transfer"] .module-hero h2 {
  margin: 0 !important;
  font-size: 25px !important;
  line-height: 1.05 !important;
  font-weight: 760 !important;
  color: #0f172a !important;
  letter-spacing: 0 !important;
}

body[data-experience-tone="transfer"] .module-hero .muted,
body[data-experience-tone="transfer"] .module-subtitle,
body[data-experience-tone="transfer"] .premium-transfer-guide,
body[data-experience-tone="transfer"] .module-hero .kpi-pill {
  display: none !important;
}

/* ── Form panels on transfer page ───────────────────────────────── */
body[data-experience-tone="transfer"] .panel {
  background: #ffffff !important;
  border: 1px solid #d8e1ee !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  padding: 12px 16px 13px !important;
  margin-bottom: 12px !important;
}

body[data-experience-tone="transfer"] .task-view-transfer > .panel:first-child {
  display: grid !important;
  gap: 10px !important;
}

body[data-experience-tone="transfer"] .inline-grid {
  display: grid !important;
  grid-template-columns:
    minmax(180px, 1fr)
    minmax(180px, 1fr)
    minmax(160px, 0.9fr)
    minmax(150px, 0.8fr)
    minmax(170px, auto) !important;
  gap: 8px !important;
  align-items: center !important;
  padding: 9px !important;
  border: 1px solid #e0e7f1 !important;
  border-radius: 11px !important;
  background: #f8fafc !important;
}

/* Panel headings */
body[data-experience-tone="transfer"] .panel h2,
body[data-experience-tone="transfer"] .panel h3 {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #1a2640 !important;
  margin: 0 0 14px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid #e4eaf2 !important;
}

/* ── Selects and inputs ──────────────────────────────────────────── */
body[data-experience-tone="transfer"] select,
body[data-experience-tone="transfer"] input[type="text"],
body[data-experience-tone="transfer"] input[type="search"] {
  border: 1px solid #cdd8e7 !important;
  border-radius: 9px !important;
  background: #ffffff !important;
  color: #26364f !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 8px 10px !important;
  min-height: 38px !important;
  outline: none !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}
body[data-experience-tone="transfer"] select:focus,
body[data-experience-tone="transfer"] input:focus {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.12) !important;
}

/* ── Table (task list for selection) ────────────────────────────── */
body[data-experience-tone="transfer"] table {
  border-collapse: collapse !important;
  width: 100% !important;
}

body[data-experience-tone="transfer"] thead th {
  background: #1e2d4a !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  padding: 10px 14px !important;
  border: none !important;
  white-space: nowrap !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
}

body[data-experience-tone="transfer"] tbody tr {
  border-bottom: 1px solid #f1f5f9 !important;
  transition: background 0.12s !important;
}
body[data-experience-tone="transfer"] tbody tr:hover {
  background: #f8faff !important;
}

body[data-experience-tone="transfer"] tbody td {
  padding: 12px 14px !important;
  font-size: 13px !important;
  color: #1a2640 !important;
  vertical-align: middle !important;
  border: none !important;
}

/* Checkbox column */
body[data-experience-tone="transfer"] tbody td input[type="checkbox"] {
  min-height: unset !important;
  width: 16px !important;
  height: 16px !important;
  cursor: pointer !important;
  accent-color: #2563eb !important;
}

/* ── Buttons ─────────────────────────────────────────────────────── */
body[data-experience-tone="transfer"] button[type="submit"],
body[data-experience-tone="transfer"] .transfer-btn,
body[data-experience-tone="transfer"] button[class*="primary"],
body[data-experience-tone="transfer"] button[class*="transfer"],
body[data-experience-tone="transfer"] .task-view-transfer .action-warning {
  background: #17315f !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 9px !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  box-shadow: 0 8px 18px -14px rgba(22, 54, 105, 0.65) !important;
  transition: all 0.15s !important;
  min-height: 38px !important;
}
body[data-experience-tone="transfer"] button[type="submit"]:hover {
  background: #10294f !important;
  box-shadow: 0 8px 18px -14px rgba(22, 54, 105, 0.65) !important;
  transform: none !important;
}

body[data-experience-tone="transfer"] .task-view-transfer .table-wrap {
  padding: 0 !important;
  max-height: calc(100vh - 245px) !important;
  overflow: auto !important;
}

@media (max-width: 1180px) {
  body[data-experience-tone="transfer"] .inline-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 820px) {
  body[data-experience-tone="transfer"] .module-hero,
  body[data-experience-tone="transfer"] .inline-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── Label row (From → To) ───────────────────────────────────────── */
body[data-experience-tone="transfer"] label,
body[data-experience-tone="transfer"] .form-label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #1a2640 !important;
  display: block !important;
  margin-bottom: 5px !important;
}

/* Arrow icon between from/to selects */
body[data-experience-tone="transfer"] .transfer-arrow {
  font-size: 20px;
  color: #2563eb;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
}

/* Status tag inside transfer task list */
body[data-experience-tone="transfer"] .tag,
body[data-experience-tone="transfer"] [class*="status"] {
  border-radius: 20px !important;
  padding: 3px 10px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
}