.wpti-container { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; max-width: 1100px; margin: 0 auto; color: #1e293b; }
.wpti-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; border-bottom: 1px solid #e2e8f0; padding-bottom: 12px; flex-wrap: wrap; gap: 12px; }
.wpti-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.tab-btn { background: transparent; border: none; padding: 8px 16px; font-weight: 600; color: #64748b; cursor: pointer; border-bottom: 2px solid transparent; }
.tab-btn.active { color: #2563eb; border-bottom-color: #2563eb; }
.tab-content.hidden { display: none; }
.wpti-actions-bar { margin-bottom: 16px; text-align: right; }
.wpti-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
@media (max-width: 720px) { .wpti-stats-grid { grid-template-columns: repeat(2, 1fr); } }
.wpti-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.wpti-card .label { display: block; font-size: 14px; color: #64748b; }
.wpti-card strong { font-size: 24px; color: #0f172a; }
.wpti-card strong.danger { color: #dc2626; }
.wpti-table { width: 100%; border-collapse: collapse; text-align: left; }
.wpti-table th, .wpti-table td { padding: 12px; border-bottom: 1px solid #e2e8f0; }
.wpti-table th { background: #f8fafc; color: #475569; font-size: 13px; }
.wpti-btn { padding: 8px 16px; border-radius: 6px; border: none; cursor: pointer; font-weight: 600; text-decoration: none; display: inline-block; }
.wpti-btn.primary { background: #2563eb; color: #fff; }
.wpti-btn.secondary { background: #f1f5f9; color: #334155; }
.btn-sm { padding: 4px 8px; border-radius: 4px; border: 1px solid #cbd5e1; background: #fff; color: #334155; cursor: pointer; font-size: 12px; text-decoration: none; margin-right: 4px; display: inline-block; }
.btn-sm.danger { color: #dc2626; border-color: #fecaca; background: #fff5f5; }
.wpti-actions { white-space: nowrap; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; text-transform: capitalize; }
.badge.draft { background: #e2e8f0; color: #475569; }
.badge.issued { background: #dbeafe; color: #1d4ed8; }
.badge.paid { background: #dcfce7; color: #15803d; }
.badge.overdue { background: #fee2e2; color: #b91c1c; }
.badge.void { background: #f3f4f6; color: #6b7280; }
.wpti-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: flex; justify-content: center; align-items: center; z-index: 9999; }
.wpti-modal.hidden { display: none; }
.wpti-modal-content { background: #fff; padding: 24px; border-radius: 8px; width: 600px; max-width: 90%; max-height: 90vh; overflow-y: auto; position: relative; }
.wpti-close { position: absolute; top: 12px; right: 16px; font-size: 24px; cursor: pointer; color: #64748b; }
.line-row { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr auto; gap: 8px; margin-bottom: 8px; align-items: center; }
.line-row input, .line-row select { min-width: 0; width: 100%; box-sizing: border-box; padding: 6px; border: 1px solid #cbd5e1; border-radius: 4px; }
.btn-remove { background: #fee2e2; color: #dc2626; border: none; border-radius: 4px; padding: 6px 10px; cursor: pointer; font-weight: bold; }
.wpti-summary { margin-top: 16px; text-align: right; font-size: 14px; }
.wpti-summary .grand-total { font-size: 18px; font-weight: bold; margin-top: 8px; }
.form-group { margin-bottom: 12px; }
.form-group label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 8px; border: 1px solid #cbd5e1; border-radius: 4px; box-sizing: border-box; }
.table-card { padding: 0; }
.table-card h3 { padding: 16px 20px 0; margin: 0; }
#wpti-toast { position: fixed; bottom: 24px; right: 24px; background: #16a34a; color: #fff; padding: 12px 20px; border-radius: 8px; font-weight: 600; z-index: 10001; opacity: 0; transition: opacity 0.3s; pointer-events: none; }
#wpti-toast.show { opacity: 1; }
.line-catalog { grid-column: 1 / -1; padding: 6px; border: 1px solid #cbd5e1; border-radius: 4px; }

.wpti-stats-grid .wpti-card { border-top: 4px solid #2563eb; }
.wpti-stats-grid .stat-billed { border-top-color: #2563eb; background: #eff6ff; }
.wpti-stats-grid .stat-overdue { border-top-color: #dc2626; background: #fef2f2; }
.wpti-stats-grid .stat-paid { border-top-color: #16a34a; background: #f0fdf4; }
.wpti-stats-grid .stat-count { border-top-color: #8b5cf6; background: #faf5ff; }
.wpti-filters { display: flex; gap: 8px; padding: 0 20px 16px; flex-wrap: wrap; }
.wpti-filters input, .wpti-filters select { padding: 8px; border: 1px solid #cbd5e1; border-radius: 6px; min-width: 0; }
.wpti-filters input { flex: 1; min-width: 200px; }

.wpti-dropdown { position: relative; display: inline-block; }
.wpti-menu-btn { padding: 4px 9px; font-size: 15px; line-height: 1; }
.wpti-menu { position: absolute; right: 0; top: 100%; background: #fff; border: 1px solid #e2e8f0; border-radius: 6px; box-shadow: 0 6px 16px rgba(0,0,0,0.14); z-index: 2000; min-width: 170px; padding: 4px; margin-top: 4px; }
.wpti-menu.hidden { display: none; }
.wpti-menu-item { display: block; width: 100%; text-align: left; padding: 8px 12px; border: none; background: none; cursor: pointer; font-size: 13px; color: #334155; border-radius: 4px; text-decoration: none; box-sizing: border-box; }
.wpti-menu-item:hover { background: #f1f5f9; }
.wpti-menu-item.danger { color: #dc2626; }
.wpti-menu-item.danger:hover { background: #fef2f2; }