/* ============================================================================
   operator_manager_edit.php v2 — 撥款名冊 (payout roster) 視覺同 operator_manager v4.0
   Palette: cream parchment + deep teal ink + saffron + forest green
   ============================================================================ */
:root {
  --omed-cream-50:  #F8F5EC;
  --omed-cream-100: #EFE9D8;
  --omed-cream-200: #E2D9BE;
  --omed-cream-300: #CFC4A0;
  --omed-ink:       #0F4C5C;  /* deep teal ink — h1 / 標題 */
  --omed-ink-soft:  #4A6F7A;  /* 中等 teal — secondary text */
  --omed-ink-mute:  #8B9DA3;  /* 最淡 teal — hint / label */
  --omed-saffron:   #D97706;  /* 主 accent — 按鈕 / 重點 */
  --omed-saffron-h: #B45309;  /* hover */
  --omed-saffron-d: #92400E;  /* pressed */
  --omed-forest:    #047857;  /* 可撥款 / 已就緒 */
  --omed-forest-d:  #065F46;
  --omed-amber:     #B45309;  /* partial / 資料不齊 */
  --omed-danger:    #B91C1C;
  --omed-danger-d:  #991B1B;
  --omed-paper:     #FFFFFF;
  --omed-rule:      #D6CFB8;
  --omed-rule-soft: #E8E2D0;
  --omed-shadow:    0 1px 2px rgba(15, 76, 92, 0.04), 0 4px 12px rgba(15, 76, 92, 0.06);
  --omed-shadow-lg: 0 2px 4px rgba(15, 76, 92, 0.06), 0 12px 32px rgba(15, 76, 92, 0.10);
  --omed-radius:    6px;
  --omed-radius-sm: 4px;
}

/* ============================================================================
   頁面版心 — 跟 operator_manager.php v4.0 一樣的 cream parchment 背景
   ============================================================================ */
.omed-main {
  font-family: 'Noto Sans TC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--omed-ink);
  background:
    linear-gradient(135deg, var(--omed-cream-50) 0%, var(--omed-cream-100) 100%);
  padding: 32px 36px 120px;
  min-height: 100vh;
  font-size: 14px;
  line-height: 1.55;
}

/* ============================================================================
   HERO — 深 teal ink + cream 漸層,跟 list 頁的卡片 aesthetic 一致
   ============================================================================ */
.omed-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 32px 36px;
  margin-bottom: 28px;
  background:
    linear-gradient(120deg, var(--omed-cream-50) 0%, var(--omed-cream-100) 60%, var(--omed-cream-200) 100%);
  border: 1px solid var(--omed-rule);
  border-left: 5px solid var(--omed-saffron);
  border-radius: var(--omed-radius);
  box-shadow: var(--omed-shadow);
  position: relative;
  overflow: hidden;
}
.omed-hero::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 180px; height: 100%;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 14px,
      rgba(15, 76, 92, 0.04) 14px,
      rgba(15, 76, 92, 0.04) 15px
    );
  pointer-events: none;
}
.omed-hero-text { flex: 1 1 auto; min-width: 0; }
.omed-hero-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--omed-saffron);
  margin-bottom: 10px;
}
.omed-hero-text h1 {
  margin: 0 0 8px;
  font-size: 32px;
  font-weight: 700;
  color: var(--omed-ink);
  letter-spacing: -0.01em;
  font-family: 'Noto Serif TC', 'Noto Sans TC', serif;
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 12px;
}

.omed-role-badge {
  display: inline-block;
  font-family: var(--omed-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--omed-ink);
  background: linear-gradient(135deg, #f5d76e 0%, #e6a623 100%);
  border: 1px solid #c7911f;
  padding: 3px 10px;
  border-radius: 4px;
  text-transform: uppercase;
}
.omed-hero-sub {
  margin: 0;
  font-size: 14px;
  color: var(--omed-ink-soft);
  letter-spacing: 0.02em;
}

.omed-hero-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  flex-shrink: 0;
}
.omed-hero-pid {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 8px 14px;
  background: rgba(15, 76, 92, 0.04);
  border: 1px solid var(--omed-rule);
  border-radius: var(--omed-radius-sm);
}
.omed-hero-pid-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--omed-ink-mute);
  text-transform: uppercase;
}
.omed-hero-pid-num {
  font-size: 18px;
  font-weight: 700;
  color: var(--omed-ink);
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  margin-top: 2px;
}

/* payout meter chip */
.omed-payout-meter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border: 1.5px solid transparent;
}
.omed-payout-meter svg { width: 14px; height: 14px; flex-shrink: 0; }
.omed-payout-meter.is-ready {
  background: rgba(4, 120, 87, 0.08);
  color: var(--omed-forest-d);
  border-color: rgba(4, 120, 87, 0.35);
}
.omed-payout-meter.is-partial {
  background: rgba(217, 119, 6, 0.08);
  color: var(--omed-amber);
  border-color: rgba(217, 119, 6, 0.35);
}
.omed-payout-meter.is-empty {
  background: rgba(15, 76, 92, 0.06);
  color: var(--omed-ink-soft);
  border-color: var(--omed-rule);
}

/* ============================================================================
   SECTION — 像帳本內頁
   ============================================================================ */
.omed-form { display: flex; flex-direction: column; gap: 24px; }
.omed-section {
  background: var(--omed-paper);
  border: 1px solid var(--omed-rule);
  border-radius: var(--omed-radius);
  padding: 28px 32px;
  box-shadow: var(--omed-shadow);
}
.omed-section-bank {
  background:
    linear-gradient(180deg, var(--omed-paper) 0%, rgba(248, 245, 236, 0.4) 100%);
  border-left: 4px solid var(--omed-saffron);
}

/* Payment override cross-link (Phase 6) — strip between hero and form */
.omed-paymentcall {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 22px;
  margin-bottom: 18px;
  background:
    linear-gradient(120deg, rgba(15, 76, 92, 0.05) 0%, rgba(217, 119, 6, 0.05) 100%);
  border: 1px solid rgba(15, 76, 92, 0.18);
  border-left: 4px solid var(--omed-ink);
  border-radius: var(--omed-radius);
}
.omed-paymentcall-text {
  flex: 1 1 auto;
  font-size: 13px;
  line-height: 1.55;
  color: var(--omed-ink-soft);
}
.omed-paymentcall-text code {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  background: rgba(15, 76, 92, 0.08);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 12px;
  color: var(--omed-ink);
}
.omed-paymentcall-cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  background: var(--omed-ink);
  color: var(--omed-cream-50);
  border-radius: var(--omed-radius);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 120ms;
  font-family: 'Noto Sans TC', -apple-system, sans-serif;
}
.omed-paymentcall-cta svg { width: 16px; height: 16px; }
.omed-paymentcall-cta:hover {
  background: #0a3b48;
  color: white;
}
@media (max-width: 720px) {
  .omed-paymentcall { flex-direction: column; align-items: flex-start; }
  .omed-paymentcall-cta { width: 100%; justify-content: center; }
}
.omed-section-title {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 700;
  color: var(--omed-ink);
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: 'Noto Serif TC', 'Noto Sans TC', serif;
  letter-spacing: 0.01em;
}
.omed-section-hint {
  margin: 0 0 22px;
  font-size: 12.5px;
  color: var(--omed-ink-mute);
  letter-spacing: 0.02em;
}
.omed-req { color: var(--omed-danger); font-weight: 700; }
.omed-mono {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 0.92em;
  color: var(--omed-ink);
}

/* ============================================================================
   GRIDS — 2 欄 / 3 欄 / 1 欄
   ============================================================================ */
.omed-grid-2,
.omed-grid-3,
.omed-grid-1 {
  display: grid;
  gap: 18px 22px;
}
.omed-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.omed-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.omed-grid-1 { grid-template-columns: 1fr; }

@media (max-width: 900px) {
  .omed-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .omed-grid-2,
  .omed-grid-3 { grid-template-columns: 1fr; }
}

/* ============================================================================
   FIELDS
   ============================================================================ */
.omed-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.omed-field-full { grid-column: 1 / -1; }
.omed-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--omed-ink-soft);
  text-transform: none;
}
.omed-input {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding: 10px 14px;
  font-size: 14px;
  font-family: inherit;
  color: var(--omed-ink);
  background: var(--omed-cream-50);
  border: 1.5px solid var(--omed-rule);
  border-radius: var(--omed-radius-sm);
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  outline: none;
  line-height: 1.4;
}
.omed-input:hover {
  border-color: var(--omed-ink-soft);
}
.omed-input:focus {
  border-color: var(--omed-saffron);
  background: var(--omed-paper);
  box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.12);
}
.omed-input.mono {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  letter-spacing: 0.01em;
}
.omed-input.serif {
  font-family: 'Noto Serif TC', 'Noto Sans TC', serif;
  font-weight: 500;
}
.omed-input::placeholder {
  color: var(--omed-ink-mute);
  opacity: 0.7;
}
.omed-input-hint {
  font-size: 11px;
  color: var(--omed-ink-mute);
  letter-spacing: 0.02em;
  line-height: 1.4;
}

/* ============================================================================
   PAYOUT READINESS — 3 段式 (signature element from operator_manager v4.0)
   ============================================================================ */
.omed-readiness {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 20px;
  padding: 16px 18px;
  background:
    repeating-linear-gradient(
      45deg,
      transparent 0,
      transparent 10px,
      rgba(15, 76, 92, 0.025) 10px,
      rgba(15, 76, 92, 0.025) 11px
    ),
    var(--omed-cream-50);
  border: 1px dashed var(--omed-rule);
  border-radius: var(--omed-radius);
}
@media (max-width: 720px) {
  .omed-readiness { grid-template-columns: 1fr; }
}
.omed-readiness-segment {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--omed-paper);
  border: 1.5px solid var(--omed-rule);
  border-radius: var(--omed-radius-sm);
  transition: all 0.2s ease;
}
.omed-readiness-segment.is-on {
  border-color: rgba(4, 120, 87, 0.45);
  background: rgba(4, 120, 87, 0.05);
}
.omed-readiness-segment.is-on .omed-readiness-dot {
  background: var(--omed-forest);
  box-shadow: 0 0 0 3px rgba(4, 120, 87, 0.18);
}
.omed-readiness-segment.is-on .omed-readiness-state {
  color: var(--omed-forest-d);
  font-weight: 700;
}
.omed-readiness-segment.is-off .omed-readiness-dot {
  background: transparent;
  border: 2px dashed var(--omed-cream-300);
}
.omed-readiness-segment.is-off .omed-readiness-state {
  color: var(--omed-ink-mute);
  font-style: italic;
  font-weight: 500;
}
.omed-readiness-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: all 0.2s ease;
}
.omed-readiness-label {
  font-size: 12px;
  color: var(--omed-ink-soft);
  font-weight: 600;
  letter-spacing: 0.04em;
  flex: 1 1 auto;
}
.omed-readiness-state {
  font-size: 11.5px;
  letter-spacing: 0.05em;
  transition: color 0.2s ease;
}

.omed-payout-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 3px 10px;
  border-radius: 999px;
  text-transform: uppercase;
}
.omed-payout-label.is-ready {
  background: rgba(4, 120, 87, 0.12);
  color: var(--omed-forest-d);
  border: 1px solid rgba(4, 120, 87, 0.35);
}
.omed-payout-label.is-empty {
  background: rgba(15, 76, 92, 0.06);
  color: var(--omed-ink-soft);
  border: 1px solid var(--omed-rule);
}

/* ============================================================================
   ERROR
   ============================================================================ */
.omed-error {
  margin-top: 4px;
  padding: 14px 18px;
  background: rgba(185, 28, 28, 0.06);
  border: 1px solid rgba(185, 28, 28, 0.35);
  border-radius: var(--omed-radius-sm);
  color: var(--omed-danger-d);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.omed-error::before {
  content: '⚠ ';
  margin-right: 4px;
}

/* ============================================================================
   STICKY ACTION BAR — 帳本底部
   ============================================================================ */
.omed-actions {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 18px 32px;
  margin-top: 12px;
  background:
    linear-gradient(180deg, rgba(248, 245, 236, 0.6) 0%, var(--omed-cream-100) 100%);
  border-top: 1.5px solid var(--omed-rule);
  border-radius: var(--omed-radius) var(--omed-radius) 0 0;
  box-shadow: 0 -4px 16px rgba(15, 76, 92, 0.08);
  backdrop-filter: blur(8px);
}
.omed-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  letter-spacing: 0.04em;
  border-radius: var(--omed-radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
  background: var(--omed-paper);
  color: var(--omed-ink);
  border: 1.5px solid var(--omed-rule);
}
.omed-action svg { width: 16px; height: 16px; flex-shrink: 0; }
.omed-action:hover:not(:disabled) {
  border-color: var(--omed-ink-soft);
  background: var(--omed-cream-50);
}
.omed-action:active:not(:disabled) { transform: translateY(1px); }
.omed-action:disabled { opacity: 0.5; cursor: not-allowed; }

.omed-action-danger {
  color: var(--omed-danger);
  border-color: rgba(185, 28, 28, 0.4);
  margin-right: auto;
}
.omed-action-danger:hover:not(:disabled) {
  background: var(--omed-danger);
  color: var(--omed-paper);
  border-color: var(--omed-danger);
}

.omed-action-primary {
  background: var(--omed-saffron);
  color: var(--omed-paper);
  border-color: var(--omed-saffron);
  box-shadow: 0 2px 8px rgba(217, 119, 6, 0.25);
}
.omed-action-primary:hover:not(:disabled) {
  background: var(--omed-saffron-h);
  border-color: var(--omed-saffron-h);
  box-shadow: 0 4px 12px rgba(217, 119, 6, 0.35);
}
.omed-action-primary:active:not(:disabled) {
  background: var(--omed-saffron-d);
  border-color: var(--omed-saffron-d);
}

/* ============================================================================
   RESPONSIVE — mobile
   ============================================================================ */
@media (max-width: 640px) {
  .omed-main { padding: 20px 16px 100px; }
  .omed-hero {
    flex-direction: column;
    padding: 22px 22px;
  }
  .omed-hero-meta { align-items: flex-start; flex-direction: row; flex-wrap: wrap; gap: 10px; }
  .omed-hero-text h1 { font-size: 24px; }
  .omed-section { padding: 20px 20px; }
  .omed-actions { padding: 14px 18px; flex-wrap: wrap; }
  .omed-action { padding: 9px 16px; font-size: 13px; }
  .omed-action-danger { margin-right: 0; flex-basis: 100%; order: 99; }
}

/* ============================================================================
   KEYBOARD FOCUS
   ============================================================================ */
.omed-input:focus-visible,
.omed-action:focus-visible {
  outline: 3px solid rgba(217, 119, 6, 0.5);
  outline-offset: 2px;
}

/* ============================================================================
   REDUCED MOTION
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  .omed-readiness-segment,
  .omed-readiness-dot,
  .omed-action {
    transition: none !important;
  }
}

/* ============================================================================
   月結費率設定 v6.0 (跟 bank section 同 aesthetic)
   ============================================================================ */
.omed-section-fee {
  border-left: 3px solid var(--omed-saffron);
  background: linear-gradient(180deg, var(--omed-paper) 0%, var(--omed-cream-50) 100%);
}

.omed-fee-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  margin-left: 8px;
}

.omed-fee-label.is-empty {
  background: var(--omed-cream-200);
  color: var(--omed-ink-mute);
}

.omed-fee-label.is-ready {
  background: var(--omed-forest);
  color: #fff;
}

.omed-fee-toggle {
  margin-right: 6px;
  accent-color: var(--omed-saffron);
  cursor: pointer;
  vertical-align: middle;
}

.omed-fee-preview {
  margin-top: 16px;
  padding: 12px 16px;
  background: var(--omed-cream-50);
  border: 1px solid var(--omed-rule);
  border-radius: var(--omed-radius);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.omed-fee-preview-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--omed-ink-soft);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.omed-fee-preview-formula {
  font-family: 'Noto Sans TC', monospace;
  font-size: 13px;
  color: var(--omed-ink);
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}