/* PonPon School Ops — Payment CSV Importer (v5.15.0) */

#ppso-payment-imports .ppi-shell {
  --ppi-primary: #2A6AE0;
  --ppi-accent: #2A6AE0;
  --ppi-bg: #f6f8fc;
  --ppi-card: #ffffff;
  --ppi-border: #d8dee9;
  --ppi-muted: #6b7280;
  --ppi-success: #2A6AE0;
  --ppi-warn: #d97706;
  --ppi-danger: #dc2626;
  --ppi-purple: #7c3aed;
  font-family: "PonPon CJK", "Noto Sans SC", "Microsoft YaHei", "Microsoft JhengHei", "PingFang SC", "Segoe UI", Arial, sans-serif;
  color: #111827;
  background: var(--ppi-bg);
  padding: 16px;
  font-size: 14px;
  line-height: 1.5;
}

#ppso-payment-imports .ppi-header h2 { margin: 0 0 4px; font-size: 22px; color: var(--ppi-primary); }
#ppso-payment-imports .ppi-subtitle { color: var(--ppi-muted); margin: 0 0 16px; }

/* Uploader */
#ppso-payment-imports .ppi-uploader {
  background: var(--ppi-card);
  border: 1px solid var(--ppi-border);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}
#ppso-payment-imports .ppi-upload-form { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; }
#ppso-payment-imports .ppi-drop {
  flex: 1 1 320px;
  min-height: 88px;
  border: 2px dashed var(--ppi-border);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  background: #fafbfc;
  transition: border-color .15s, background .15s;
}
#ppso-payment-imports .ppi-drop:hover { border-color: var(--ppi-accent); background: #f0f6ff; }
#ppso-payment-imports .ppi-drop input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
#ppso-payment-imports .ppi-drop label { color: var(--ppi-muted); font-weight: 500; }
#ppso-payment-imports .ppi-upload-fields { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
#ppso-payment-imports .ppi-upload-fields label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--ppi-muted); }
#ppso-payment-imports .ppi-upload-fields input[type=number] {
  width: 110px; padding: 8px 10px; border: 1px solid var(--ppi-border); border-radius: 6px; font-size: 14px;
}
#ppso-payment-imports .ppi-check { flex-direction: row !important; align-items: center !important; gap: 6px !important; }

/* Buttons */
#ppso-payment-imports .ppi-btn {
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  background: #fff;
  transition: background .15s, border-color .15s, transform .1s;
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 36px;
}
#ppso-payment-imports .ppi-btn:active { transform: translateY(1px); }
#ppso-payment-imports .ppi-btn-primary { background: var(--ppi-primary); color: #fff; border-color: var(--ppi-primary); }
#ppso-payment-imports .ppi-btn-primary:hover { background: #1F56BD; border-color: #1F56BD; }
#ppso-payment-imports .ppi-btn-secondary { background: #fff; color: #2A6AE0; border-color: #2A6AE0; }
#ppso-payment-imports .ppi-btn-secondary:hover { background: #fff; color: #1F56BD; border-color: #1F56BD; }
#ppso-payment-imports .ppi-btn-link {
  background: transparent;
  color: var(--ppi-accent);
  border: none;
  padding: 6px 8px;
  font-weight: 500;
}
#ppso-payment-imports .ppi-btn-link:hover { color: var(--ppi-primary); text-decoration: underline; }
#ppso-payment-imports .ppi-btn-danger { background: #fff; color: var(--ppi-danger); border-color: #fecaca; }
#ppso-payment-imports .ppi-btn-danger:hover { background: #fef2f2; }
#ppso-payment-imports .ppi-btn-danger-link { color: var(--ppi-danger) !important; }
#ppso-payment-imports .ppi-btn-danger-link:hover { background: #fef2f2; color: var(--ppi-danger) !important; }

/* v5.15.2: Report download group in row toolbar */
#ppso-payment-imports .ppi-report-group {
  display: flex; gap: 6px; align-items: center;
  padding: 0 8px;
  border-left: 1px solid var(--ppi-border);
  border-right: 1px solid var(--ppi-border);
}
#ppso-payment-imports .ppi-report-group .ppi-btn { font-size: 12px; padding: 6px 10px; }

/* Batch list action column */
#ppso-payment-imports .ppi-batch-actions { white-space: nowrap; }
#ppso-payment-imports .ppi-batch-actions .ppi-btn { padding: 4px 8px; font-size: 12px; }
#ppso-payment-imports .ppi-batch-menu { font-size: 16px; padding: 2px 8px !important; }

/* Batch menu popover */
.ppi-batch-menu-pop { min-width: 240px; }
.ppi-batch-menu-pop button[data-dl],
.ppi-batch-menu-pop button[data-act-batch] { font-size: 13px; padding: 10px 12px; }
.ppi-batch-menu-pop .ppi-menu-sep {
  border: none;
  border-top: 1px solid #e5e7eb;
  margin: 6px 0;
}
.ppi-batch-menu-pop .ppi-menu-danger { color: #dc2626 !important; }
.ppi-batch-menu-pop .ppi-menu-danger:hover { background: #fef2f2 !important; }

/* Body sections */
#ppso-payment-imports .ppi-body { background: var(--ppi-card); border: 1px solid var(--ppi-border); border-radius: 8px; padding: 16px; }
#ppso-payment-imports .ppi-body h3 { margin: 0 0 12px; font-size: 16px; color: var(--ppi-primary); }
#ppso-payment-imports .ppi-empty { text-align: center; color: var(--ppi-muted); padding: 32px 16px; }

/* Toolbar */
#ppso-payment-imports .ppi-row-toolbar {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 12px;
  padding-bottom: 12px; border-bottom: 1px solid var(--ppi-border);
}
#ppso-payment-imports .ppi-filters { display: flex; gap: 8px; flex-wrap: wrap; }
#ppso-payment-imports .ppi-filters select {
  padding: 8px 10px; border: 1px solid var(--ppi-border); border-radius: 6px; font-size: 13px; background: #fff;
}
#ppso-payment-imports .ppi-bulk { display: flex; gap: 8px; align-items: center; margin-left: auto; }
#ppso-payment-imports .ppi-selected-count {
  background: var(--ppi-primary); color: #fff; padding: 4px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; min-width: 24px; text-align: center;
}

/* Table */
#ppso-payment-imports .ppi-table-wrap { overflow-x: auto; }
#ppso-payment-imports .ppi-table { width: 100%; border-collapse: collapse; font-size: 13px; }
#ppso-payment-imports .ppi-table th,
#ppso-payment-imports .ppi-table td { padding: 10px 12px; border-bottom: 1px solid var(--ppi-border); text-align: left; vertical-align: middle; }
#ppso-payment-imports .ppi-table th { background: #f9fafb; font-weight: 600; color: #374151; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
#ppso-payment-imports .ppi-table tbody tr:hover { background: #f8fbff; }
#ppso-payment-imports .ppi-mono { font-family: ui-monospace, SFMono-Regular, monospace; color: #1f2937; }
#ppso-payment-imports .ppi-num { text-align: right; font-variant-numeric: tabular-nums; }
#ppso-payment-imports .ppi-desc { max-width: 280px; word-break: break-word; }
#ppso-payment-imports .ppi-cat { display: inline-block; background: #eef2ff; color: #4338ca; padding: 1px 6px; border-radius: 4px; font-size: 11px; margin-left: 4px; }
#ppso-payment-imports .ppi-handler { color: var(--ppi-muted); font-size: 11px; }
#ppso-payment-imports .ppi-muted { color: var(--ppi-muted); }
#ppso-payment-imports .ppi-actions { white-space: nowrap; }
#ppso-payment-imports .ppi-actions .ppi-btn { padding: 4px 8px; font-size: 12px; min-height: 28px; margin-right: 2px; }
#ppso-payment-imports .ppi-refund { color: var(--ppi-danger); font-weight: 500; font-size: 11px; }
#ppso-payment-imports .ppi-student-cell { color: #1f2937; font-weight: 500; }

/* v5.16.0: Currency code badges + amount layout */
#ppso-payment-imports .ppi-cur-code {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-right: 4px;
  vertical-align: middle;
}
#ppso-payment-imports .ppi-cur-THB { background: #dbeafe; color: #1e40af; }
#ppso-payment-imports .ppi-cur-RMB { background: #fef3c7; color: #92400e; }
#ppso-payment-imports .ppi-amt {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}
#ppso-payment-imports .ppi-cur-line { line-height: 1.3; }
#ppso-payment-imports .ppi-cur-refund {
  color: var(--ppi-danger);
  font-size: 11px;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

/* Pills */
#ppso-payment-imports .ppi-pill {
  display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 11px; font-weight: 500;
}
#ppso-payment-imports .ppi-pill-pending   { background: #fef3c7; color: #92400e; }
#ppso-payment-imports .ppi-pill-assigned  { background: #dcfce7; color: #166534; }
#ppso-payment-imports .ppi-pill-skipped   { background: #f3f4f6; color: #4b5563; }
#ppso-payment-imports .ppi-pill-duplicate { background: #fef9c3; color: #854d0e; }
#ppso-payment-imports .ppi-pill-failed    { background: #fee2e2; color: #991b1b; }
#ppso-payment-imports .ppi-err-tip {
  display: inline-block;
  margin-left: 4px;
  font-size: 13px;
  color: var(--ppi-danger);
  cursor: help;
  vertical-align: middle;
}

/* Toast */
#ppso-payment-imports .ppi-toast {
  position: fixed; bottom: 24px; right: 24px;
  background: #111827; color: #fff;
  padding: 12px 16px; border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  z-index: 9999; max-width: 400px; font-size: 13px;
}

/* Popover */
.ppi-popover {
  position: absolute;
  background: #fff;
  border: 1px solid var(--ppi-border, #d8dee9);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  padding: 8px;
  z-index: 10000;
  min-width: 280px;
  max-height: 320px;
  overflow-y: auto;
}
.ppi-popover .ppi-suggest-row {
  display: block; width: 100%; text-align: left; padding: 8px 10px;
  background: transparent; border: none; border-radius: 4px; cursor: pointer; font-size: 13px;
}
.ppi-popover .ppi-suggest-row:hover { background: #eef2ff; }
.ppi-popover .ppi-search-input {
  width: 100%; padding: 8px 10px; border: 1px solid #d8dee9; border-radius: 6px;
  margin-bottom: 8px; font-size: 13px; box-sizing: border-box;
}

/* Mobile */
@media (max-width: 720px) {
  #ppso-payment-imports .ppi-shell { padding: 12px; }
  #ppso-payment-imports .ppi-row-toolbar { flex-direction: column; align-items: stretch; }
  #ppso-payment-imports .ppi-bulk { margin-left: 0; }
  #ppso-payment-imports .ppi-table { font-size: 12px; }
  #ppso-payment-imports .ppi-table th,
  #ppso-payment-imports .ppi-table td { padding: 8px 6px; }
}

/* v5.249.0 — keep import instructions, statuses, and table rows readable. */
#ppso-payment-imports .ppi-shell{font-size:16px;line-height:1.6}
#ppso-payment-imports .ppi-table{font-size:15px}
#ppso-payment-imports .ppi-table th{font-size:14px}
#ppso-payment-imports .ppi-cat,#ppso-payment-imports .ppi-handler,#ppso-payment-imports .ppi-refund{font-size:14px}
@media(max-width:720px){
  #ppso-payment-imports .ppi-shell{font-size:17px;line-height:1.65}
  #ppso-payment-imports .ppi-table{font-size:16px}
  #ppso-payment-imports .ppi-table th{font-size:14px}
  #ppso-payment-imports .ppi-cat,#ppso-payment-imports .ppi-handler,#ppso-payment-imports .ppi-refund{font-size:15px}
}