/* TPI_BLUEPRINT_FINAL_CSS_20260823 */

/* Remove legacy floating shortcuts. Dedicated functions remain in the role menu. */
.tpi-relocated-action,
.tpi-pro-floating-action,
.tpi-professional-fab,
.tpi-v32-floating-action,
.floating-workflow-action,
body.role-tu .quick-action[data-route="tu-guardian-sync"],
body.role-treasurer .quick-action[data-route="treasurer-installments"] {
  display: none !important;
}

/* TU guardian actions: compact and side-by-side. */
body.role-tu .table-actions {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px !important;
}
body.role-tu .table-actions .button {
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  white-space: nowrap !important;
  padding: 10px 12px !important;
}

/* Human-readable Audit Sekolah. */
.tpi-human-audit { display: grid; gap: 12px; }
.tpi-human-audit-card {
  background: #fff;
  border: 1px solid rgba(15, 23, 42, .10);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .04);
}
.tpi-human-audit-top,
.tpi-human-audit-meta { display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.tpi-human-audit-top time { color: #64748b; font-size: 12px; }
.tpi-audit-badge {
  display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px;
  border-radius: 999px; background: #eaf7f1; color: #087a58; font-size: 12px; font-weight: 800;
}
.tpi-human-audit-card h3 { margin: 12px 0 6px; font-size: 18px; }
.tpi-human-audit-card > p { margin: 0; color: #475569; line-height: 1.55; }
.tpi-human-audit-meta { justify-content: flex-start; flex-wrap: wrap; margin-top: 14px; }
.tpi-human-audit-meta span { background: #f8fafc; border-radius: 12px; padding: 9px 11px; color: #334155; }
.tpi-human-audit-meta strong { display: block; margin-bottom: 2px; color: #64748b; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.tpi-human-audit-card details { margin-top: 12px; color: #64748b; }
.tpi-human-audit-card details summary { cursor: pointer; font-weight: 700; color: #0f766e; }

/* Login Staff/Developer: hero remains visible; only the form pane scrolls. */
@media (max-width: 820px) {
  html.platform-android body.audience-staff #auth-screen.login-open,
  html.platform-android body.audience-developer #auth-screen.login-open {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: var(--spp-visual-height, 100dvh) !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  html.platform-android body.audience-staff #auth-screen.login-open .auth-visual,
  html.platform-android body.audience-developer #auth-screen.login-open .auth-visual {
    position: absolute !important;
    inset: 0 0 auto 0 !important;
    height: clamp(150px, 31%, 260px) !important;
    overflow: hidden !important;
    transform: none !important;
  }
  html.platform-android body.audience-staff #auth-screen.login-open .auth-panel,
  html.platform-android body.audience-developer #auth-screen.login-open .auth-panel {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: clamp(135px, 27%, 235px) !important;
    bottom: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: hidden !important;
    transform: none !important;
  }
  html.platform-android body.audience-staff #auth-screen.login-open .auth-panel__inner,
  html.platform-android body.audience-developer #auth-screen.login-open .auth-panel__inner {
    height: 100% !important;
    max-height: 100% !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scroll-behavior: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: max(24px, env(safe-area-inset-bottom)) !important;
  }
  html.platform-android.android-keyboard-open body.audience-staff #auth-screen.login-open .auth-visual,
  html.platform-android.android-keyboard-open body.audience-developer #auth-screen.login-open .auth-visual {
    height: 150px !important;
  }
  html.platform-android.android-keyboard-open body.audience-staff #auth-screen.login-open .auth-panel,
  html.platform-android.android-keyboard-open body.audience-developer #auth-screen.login-open .auth-panel {
    top: 132px !important;
  }
}

/* Bendahara Atur Angsuran: compact switches rather than giant checks. */
.tpi-v32-installments-page [data-tpi-installment-rule-list] { gap: 14px !important; }
.tpi-v32-installments-page [data-tpi-installment-rule-form] {
  border-radius: 18px !important;
  padding: 16px !important;
  gap: 12px !important;
}
.tpi-v32-installments-page [data-tpi-installment-rule-form] input[type="checkbox"],
.social-config-card input[type="checkbox"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 46px !important;
  height: 26px !important;
  min-width: 46px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #cbd5e1 !important;
  box-shadow: inset 0 0 0 1px rgba(15,23,42,.08) !important;
  position: relative !important;
  vertical-align: middle !important;
  margin: 0 10px 0 0 !important;
  cursor: pointer !important;
}
.tpi-v32-installments-page [data-tpi-installment-rule-form] input[type="checkbox"]::after,
.social-config-card input[type="checkbox"]::after {
  content: "" !important;
  position: absolute !important;
  width: 20px !important;
  height: 20px !important;
  left: 3px !important;
  top: 3px !important;
  border-radius: 50% !important;
  background: #fff !important;
  box-shadow: 0 2px 5px rgba(15,23,42,.22) !important;
  transition: transform .16s ease !important;
}
.tpi-v32-installments-page [data-tpi-installment-rule-form] input[type="checkbox"]:checked,
.social-config-card input[type="checkbox"]:checked { background: #07865f !important; }
.tpi-v32-installments-page [data-tpi-installment-rule-form] input[type="checkbox"]:checked::after,
.social-config-card input[type="checkbox"]:checked::after { transform: translateX(20px) !important; }
.tpi-v32-installments-page [data-tpi-installment-rule-form] label:has(input[type="checkbox"]),
.social-config-card label:has(input[type="checkbox"]) {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
}

/* TU dashboard content config: grouped, calm, and preview-friendly. */
.social-config-card { display: grid !important; gap: 14px !important; }
.social-config-card .field { margin: 0 !important; }
.tpi-content-preview { margin-top: 14px; border-left: 4px solid #0a8f68 !important; }
.tpi-content-preview h3 { margin: 5px 0 8px; }
.tpi-content-preview p { margin: 0 0 8px; color: #475569; }

/* Existing promotion and modal lists stay bounded. */
.promotion-list { max-height: 320px !important; overflow-y: auto !important; overscroll-behavior: contain; }
.modal-choice-list, .choice-list.recipients, .global-search-results { max-height: min(42dvh, 360px) !important; overflow-y: auto !important; }

/* Developer correction center. */
.tpi-correction-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.tpi-correction-grid .card { margin: 0; }
.tpi-correction-policy { margin-top: 14px; }
.tpi-correction-policy ol { margin: 10px 0 0; padding-left: 20px; color: #475569; line-height: 1.7; }

@media (max-width: 720px) {
  .tpi-human-audit-top { align-items: flex-start; }
  .tpi-human-audit-meta { display: grid; grid-template-columns: 1fr 1fr; }
  body.role-tu .table-actions { gap: 6px !important; }
  body.role-tu .table-actions .button { padding: 9px 10px !important; font-size: 13px !important; }
}