.team-settings { padding: 1.5rem 0; max-width: 640px; } .team-settings h1 { margin: 0 0 1.5rem; font-size: 1.75rem; } .settings-form { margin-bottom: 2rem; } .form-section { background: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.5rem; margin-bottom: 1.5rem; } .form-section h2 { margin: 0 0 1rem; font-size: 1.125rem; } .form-group { margin-bottom: 1rem; } .form-group label { display: block; margin-bottom: 0.375rem; font-weight: 500; font-size: 0.875rem; } .form-group input, .form-group textarea { width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: 0.9375rem; background: var(--color-bg); color: var(--color-text); } .form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-primary-bg); } .input-disabled { background: var(--color-bg-tertiary) !important; color: var(--color-text-muted) !important; cursor: not-allowed; } .form-hint { display: block; margin-top: 0.25rem; font-size: 0.8125rem; color: var(--color-text-muted); } /* Danger zone */ .danger-zone { border-color: var(--color-error-border, #fecaca); background: var(--color-error-bg, #fef2f2); } .danger-zone h2 { color: var(--color-error, #dc2626); } .danger-warning { margin: 0 0 1rem; font-size: 0.875rem; color: var(--color-text-secondary); } /* Messages */ .error-message { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; margin-bottom: 1rem; background: var(--color-error-bg, #fef2f2); border: 1px solid var(--color-error-border, #fecaca); border-radius: var(--radius-md); color: var(--color-error, #dc2626); font-size: 0.875rem; } .error-dismiss { background: none; border: none; font-size: 1.25rem; cursor: pointer; color: inherit; padding: 0; line-height: 1; } .success-message { padding: 0.75rem 1rem; margin-bottom: 1rem; background: var(--color-success-bg, #f0fdf4); border: 1px solid var(--color-success-border, #86efac); border-radius: var(--radius-md); color: var(--color-success, #16a34a); font-size: 0.875rem; } /* States */ .loading-state, .error-state { text-align: center; padding: 4rem 2rem; } .error-state h2 { margin: 0 0 0.5rem; } .error-state p { margin: 0 0 1.5rem; color: var(--color-text-muted); } /* Modal */ .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 1rem; } .modal-content { background: #ffffff; border-radius: var(--radius-lg); padding: 1.5rem; width: 100%; max-width: 400px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); } .modal-content h2 { margin: 0 0 1rem; font-size: 1.25rem; color: var(--color-error, #dc2626); } .modal-content p { margin: 0 0 1rem; font-size: 0.9375rem; color: var(--color-text-secondary); } .delete-confirm-input { width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: 0.9375rem; margin-bottom: 1rem; } .form-actions { display: flex; justify-content: flex-end; gap: 0.75rem; } /* Buttons */ .btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border: none; border-radius: var(--radius-md); font-size: 0.875rem; font-weight: 500; cursor: pointer; text-decoration: none; transition: all 0.15s ease; } .btn:disabled { opacity: 0.6; cursor: not-allowed; } .btn-primary { background: var(--color-primary); color: white; } .btn-primary:hover:not(:disabled) { background: var(--color-primary-hover); } .btn-secondary { background: var(--color-bg-secondary); color: var(--color-text); border: 1px solid var(--color-border); } .btn-secondary:hover:not(:disabled) { background: var(--color-bg-tertiary); } .btn-danger { background: var(--color-error, #dc2626); color: white; } .btn-danger:hover:not(:disabled) { background: #b91c1c; }